Table of contents
No headings in the article.
CSS selectors defines the patterns to target particular elements from HTML files to which a set of styling needs to apply.
There are different categories of selectors which are as follows.
1 Universal Selector:
Consider you have created one web page using HTML and want to apply particular styling to whole web page, you want to target all elements of your HTML page in that case Universal Selectors can be used .
Syntax: Universal Selector can be denoted by .means select all elements. will match all the elements of the document.
2.Type(individual) Selector:
Type Selectors select element with specified tag name.
Example: In your HTML file if you have multiple tags and you want to apply the css to paragraph that is your p tag then you can use Type selector as follow.
p { color:yellow }
3.Class Selector:
Class Selectors selects all elements that have a class attribute with specified class name.
Syntax: Class selector denoted by using .(dot).
.text-white { color:red }
will target all elements which have class = "text-white" as an attribute.
4.Id Selector:
Same as class selector we have Id Selector which target the elements that have Id attribute with specified Id. Id attribute should be unique to each and every element.
Syntax: Id Selector denoted by using #.
#text-white{ color:red }
will target the element which has id = "text-white" as an attribute.
Note: It is a good practice not to use id to targeting elements for styling purpose because id's are unique to each element and can be use for other purpose like(automation testing).
5.Attribute Selector:
Attribute Selector select all elements which have the specified attributes
Syntax: [attributeName] or [attributeName = 'value']
[value] { color:red }
will target all elements which have the attribute as value
[value = 'userName'] { color:red }
will target all elements which have the attribute value with 'userName' as its value.
Above all are the single selectors you can also grouped the selectors known as
Grouped Selectors
6 Combined Selector: Combined Selector is denoted by ,(comma) which selects the specified tags.
Example: div,span,p{ color:red }
will target the div and span and p tags from the documents.
- Descendants(Inside an element) Selector:
Inside an element denoted by "" (space) selects the element with the specified hierarchy.
Example: div span { color: red }
will target the span which are inside div tag.
- Child(direct-child) Selector:
Direct child selector denoted by > select the element that are direct children of the first element. similar to Inside an element selector.
Example: div>span { color:red }
will target all the span element which are nested directly inside div tag that is direct child of div.
9.General Sibling Selector: The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
Syntax: A ~ B
Example: p ~ span will match all elements that follow a p, immediately or not.
10.Adjacent Sibling Selector: The + combinator matches the second element only if it immediately follows the first element.
Syntax: A + B
Example: h2 + p will match the first
element that immediately follows an h2 element.