Css is the tool to Responsive Web Design always plays an
important role whenever going to promote your website.
What is css?
Cascading Style Sheets (CSS) is a language for specifying the appearance of a document written in a markup language like HTML. Along with HTML and JavaScript, CSS is a key component of the World Wide Web.
Why is CSS important?
CSS allows you to keep a document's informative content distinct from the specifics of how it should be displayed. The style of a document refers to the specifics of how it should be presented. You separate the style from the substance in order to: Duplicate work should be avoided.Facilitate upkeep.
For different reasons, use the same text in several styles.
Thousands of pages on your website may have the same appearance. The style information is stored in common files that are shared by all pages when using CSS. When a user views a web page, the style information is loaded together with the page's content by the user's browser.
| Sr. No. | CSS Selector |
|---|---|
| 1 | Element Selector |
| 2 | Class Selector |
| 3 | ID Selector |
| 4 | Attribute Selector |
| 5 | Descendant Selector |
| 6 | Child Selector |
| 7 | Adjacent Selector |
| 8 | General Sibling Selector |
| 9 | Universal Selector |
| 10 | Pseudo Class Selector |
| 11 | Pseudo Element Selector |
| 12 | nth-of-type |
| 12 | nth-child |
Lets understand the selectors in detailed manner
1.⚓Element Selector
This is one of the most fundamental selectors in CSS. You may use the element selector to pick and style all elements with the same name. Because you won't have to use class for each piece, you'll end up writing a lot less code.
2.⚓Class Selector
Perhaps the most often used CSS selection is the class selector. The class selector is defined by a period (.) followed by the class name. Every element that matches the class inherits the style you write. A single element can have numerous classes applied to it.
3.⚓ID Selector
The ID selector styles a single element with a unique ID. The # sign is followed by the element's unique ID to utilise the ID selector. Because IDs are unique to each element, they can't be used to style many elements at the same time.
4.⚓Attribute Selector
You may pick all elements by the name or value of a particular attribute and apply style to them using [square brackets] using an attribute selector. If you need to style point-specific components, it can be quite beneficial.
5.⚓Descendant Selector
Only those elements that are descendants of a given element are styled with descendant selectors. element space> descendant is the syntax. For example, any h1 inside a div with the class name "myDiv" may be styled.
6.⚓Child Selector
You may use the DesceChild selector to pick all items that are children of a given element. parent > child is the syntax. Child selectors are different from descendant selectors in that the latter only selects direct children. Only those elements that are descendants of a particular element are styled using ndant selectors. element space> descendant is the syntax. For example, any h1 inside a div with the class name "myDiv" may be styled.
7.⚓Adjacent Selector
When you wish to pick the items that come after the specified element, you use this selector (adjacent siblings). You'd have to use the syntax "element + sibling" to utilise this.
8.⚓General Sibling Selector
These are less rigorous than selectors for nearby siblings. It allows you to choose all siblings of a given element, even if they are not contiguous. We use " instead of '+' like we did in the neighbouring selection.
9.⚓Universal Selector
It's also known as the star selector since it selects everything in the document and styles it. The element's style is defined by default by your browser, and you may alter it using the star selector. Simply type a (*) to utilise it.
10.⚓Pseudo Class Selector
You may use pseudo-classes to style one element based on the status of another element, such as hover or active (:). Hover, active, visited, target, focus, and many other classes are available. 'element:pseudo-class' is the syntax.
11.⚓Pseudo Element Selector
You may apply style to a specific chunk or fragment of the chosen element using the pseudo-element selector (::). Style the initial character, or line, of an element, for example. 'selector::pseudo-element' is the syntax.
12.⚓nth-of-type
This selector is used when you wish to apply a style to a 'nth' number of elements. Consider the following scenario: you have four lists. You may use the nth-of-type property to apply CSS solely to the second item of the ul (n).
13.⚓nth-child
The nth-child(n) selector matches any element that is the nth child of its parent, regardless of type. n can be a number, a keyword, or a formula that specifies an element's position among a set of siblings.
Burn it Down💥🍗! Feel to drop your favourite CSS Selector in the comments!To Know more about me Click here!
Top comments (0)