A selector is the most basic component in the CSS. It determines which element to match in the DOM and then apply a corresponding set of styling properties. Here’s a definition of the selector from W3C documentation:
A Selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure. – W3C
In this tutorial, we will be looking at some of the rich contextual representations of CSS3 selectors.
E[foo^=”bar”]
Here E stands for an HTML element, foo is an attribute and bar represents a value. This expression selects elements whose “foo” attribute has value that starts with the string "bar". For example:
HTML
1 |
<p id="val-1">HTMLxprs</p>
|
2 |
<p id="val-2">SitePoint</p>
|
3 |
<p id="val-3">EggheadIO</p>
|
4 |
<p id="val-4">SotchIO</p>
|
5 |
<p id="some-val">Not a value</p>
|
CSS
1 |
p[id^="val"]{
|
2 |
color: red
|
3 |
} |
The above CSS selector will select only those <p> elements who id attribute has value that starts with "val". In this case, the first four <p> tags are colored red.
E[foo$=”bar”]
This expression selects HTML elements whose 'foo' attribute has value that ends with the string 'bar'. For example:
HTML
1 |
<p id="val-1">HTMLxprs</p>
|
2 |
<p id="val-2">SitePoint</p>
|
3 |
<p id="val-3">EggheadIO</p>
|
4 |
<p id="val-4">SotchIO</p>
|
5 |
<p id="some-val">Not a value</p>
|
CSS
1 |
p[id$="val"]{
|
2 |
color: red
|
3 |
} |
In this case, only the last <p> tag has an ID attribute whose value ends with the string "val".
E[foo*=”bar”]
This expression selects all the HTML elements whose 'foo' attribute has a value containing substring bar. For example:
HTML
1 |
<p id="val-1">HTMLxprs</p>
|
2 |
<p id="val-2">SitePoint</p>
|
3 |
<p id="val-3">EggheadIO</p>
|
4 |
<p id="val-4">SotchIO</p>
|
5 |
<p id="some-val">Not a value</p>
|
CSS
1 |
p[id*="val"]{
|
2 |
color: red
|
3 |
} |
In this case, all <p> tags have an ID attribute who value contain the substring "val".
The :root selector
The :root selector always selects the root of the document which is the <html> element. It has higherspecificity than a normal element selector.
CSS
1 |
:root{ |
2 |
background: green
|
3 |
} |
4 |
html{ |
5 |
background: red;
|
6 |
} |
In this case, a green color background is applied to the <html> element instead of red due to :root‘s higher specificity.
When dealing with SVG and XML, the :root selector may point to a different element other than the <html>element.
E:nth-child(n)
This expression selects the 'E' element which is the nth child of its parent. For example:
HTML
1 |
<body> |
2 |
<p>Lorem Ipsum Donor</p>
|
3 |
<p>Lorem Ipsum Donor</p>
|
4 |
<p>Lorem Ipsum Donor</p>
|
5 |
<p>Lorem Ipsum Donor</p>
|
6 |
<p>Lorem Ipsum Donor</p>
|
7 |
</body> |
CSS
1 |
p:nth-child(3){ |
2 |
color: red;
|
3 |
} |
In this case, the parent is the <body> element and the 3rd <p> element is colored red.
Let’s examine a different scenario:
HTML
01 |
<body> |
02 |
<div>
|
03 |
<p>Lorem Ipsum Donor</p>
|
04 |
<p>Lorem Ipsum Donor</p>
|
05 |
<p>Lorem Ipsum Donor</p>
|
06 |
<p>Lorem Ipsum Donor</p>
|
07 |
<p>Lorem Ipsum Donor</p>
|
08 |
</div>
|
09 |
10 |
<div>
|
11 |
<p>Lorem Ipsum Donor</p>
|
12 |
<p>Lorem Ipsum Donor</p>
|
13 |
<p>Lorem Ipsum Donor</p>
|
14 |
<p>Lorem Ipsum Donor</p>
|
15 |
<p>Lorem Ipsum Donor</p>
|
16 |
</div>
|
17 |
</body> |
CSS
1 |
p:nth-child(3){ |
2 |
color: red;
|
3 |
} |
In this case, the parents are 2 different <div> elements. Hence, 3rd <p> element from each parent will be colored red.
You can also use string values as odd and even in place of 'n' to select odd and even elements respectively.
E:nth-last-child(n)
This expression does the reverse of E:nth-child(n). It selects nth child counting from the end.
E:nth-of-type(n)
This expression selects nth sibling of ‘E’ type element. It is a useful pseudo class if you want to ensure you are selecting elements of same type only. For example:
HTML
1 |
<body> |
2 |
<p>Lorem Ipsum Donor</p>
|
3 |
<p>Lorem Ipsum Donor</p>
|
4 |
<p>Lorem Ipsum Donor</p>
|
5 |
<p>Lorem Ipsum Donor</p>
|
6 |
<p>Lorem Ipsum Donor</p>
|
7 |
</body> |
CSS
1 |
p:nth-of-type(3){ |
2 |
color: red;
|
3 |
} |
E:nth-last-of-type(n)
This expression does the reverse of E:nth-of-type(n). Go ahead try out an example for this expression.
E:first-child and E:last-child
The pseudo class :first-child selects an element which is the first child of its parent and :last-child selects an element which is the last child of its parent. For example:
HTML
1 |
<p>Lorem Ipsum Donor</p> |
2 |
<p>Lorem Ipsum Donor</p> |
3 |
<p>Lorem Ipsum Donor</p> |
4 |
<p>Lorem Ipsum Donor</p> |
5 |
<p>Lorem Ipsum Donor</p> |
CSS
1 |
p:first-child{ |
2 |
color: green;
|
3 |
} |
4 |
p:last-child{ |
5 |
color: red;
|
6 |
} |
The first and last <p> elements are colored green and red respectively.
E:first-of-type and E:last-of-type
These are again type check pseudo classes. E:first-of-type selects first child sibling of E type and E:last-of-type selects last child of E type.
HTML
1 |
<h1>Hello World!</h1> |
2 |
<p>Lorem Ipsum Donor 1</p> |
3 |
<p>Lorem Ipsum Donor 2</p> |
4 |
<p>Lorem Ipsum Donor 3</p> |
5 |
<p>Lorem Ipsum Donor 4</p> |
6 |
<p>Lorem Ipsum Donor 5</p> |
CSS
1 |
p:first-of-type{ |
2 |
color: green;
|
3 |
} |
4 |
p:last-of-type{ |
5 |
color: red;
|
6 |
} |
In this case, the first and last <p> tags are selected irrespective of their position with respect to their parent element.
E:only-child and E:only-of-type
E:only-child selects an E element which is the only element of its parent where as E:only-of-type checks if it is the only sibling of the given type. For example:
HTML
1 |
<div> |
2 |
<p>Lorem Ipsum Donor 1</p>
|
3 |
</div> |
4 |
5 |
<div> |
6 |
<p>Lorem Ipsum Donor 1</p>
|
7 |
<p>Lorem Ipsum Donor 1</p>
|
8 |
</div> |
CSS
1 |
p:only-child{ |
2 |
color: green;
|
3 |
} |
In this case, p:only-child colors the <p> element of the first <div> element.
HTML
01 |
<div> |
02 |
<h1>Hello World!</h1>
|
03 |
<p>Lorem Ipsum Donor 1</p>
|
04 |
</div> |
05 |
06 |
<div> |
07 |
<h1>Hello World!</h1>
|
08 |
<p>Lorem Ipsum Donor 1</p>
|
09 |
<p>Lorem Ipsum Donor 1</p>
|
10 |
</div> |
CSS
1 |
p:only-of-type{ |
2 |
color: green;
|
3 |
} |
In this case, only-of-type checks on the type and colors the <p> element of the first <div> element.
E:empty
This pseudo class selects an ‘E’ element which has no children or content inside it. For example:
HTML
1 |
<div></div> |
2 |
<div> |
3 |
Hello World!
|
4 |
</div> |
CSS
1 |
div:empty{
|
2 |
width: 100px;
|
3 |
height: 100px;
|
4 |
background: green;
|
5 |
} |
In this case, the first <div> element gets selected.
E:not(s)
This expression selects an element E which is not a selector s. For example:
HTML
1 |
<p>Lorem Ipsum Donor 1</p> |
2 |
<p>Lorem Ipsum Donor 2</p> |
3 |
<p>Lorem Ipsum Donor 3</p> |
4 |
<p>Lorem Ipsum Donor 4</p> |
5 |
<p>Lorem Ipsum Donor 5</p> |
CSS
1 |
p:not(:first-child){ |
2 |
color: green;
|
3 |
} |
In this case, the last 4 <p> tags are colored green. You can put any valid selector inside the :not() pseudo selector.
Conclusion
CSS3 pseudo classes gives you different and easy ways to select elements in complex DOM structures which wouldn’t be possible by writing plain CSS. Hopefully, through this tutorial you were able to learn some of the most important ones.
