16 CSS3 Selectors You Should Know

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

<p id="val-1">HTMLxprs</p>
<p id="val-2">SitePoint</p>
<p id="val-3">EggheadIO</p>
<p id="val-4">SotchIO</p>
<p id="some-val">Not a value</p>

CSS

p[id^="val"]{
 color: red
}

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

<p id="val-1">HTMLxprs</p>
<p id="val-2">SitePoint</p>
<p id="val-3">EggheadIO</p>
<p id="val-4">SotchIO</p>
<p id="some-val">Not a value</p>

CSS

p[id$="val"]{
 color: red
}

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

<p id="val-1">HTMLxprs</p>
<p id="val-2">SitePoint</p>
<p id="val-3">EggheadIO</p>
<p id="val-4">SotchIO</p>
<p id="some-val">Not a value</p>

CSS

p[id*="val"]{
 color: red
}

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 higher specificity than a normal element selector.
CSS

:root{
 background: green
}
html{
 background: red;
}

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

<body>
 <p>Lorem Ipsum Donor</p>
 <p>Lorem Ipsum Donor</p>
 <p>Lorem Ipsum Donor</p>
 <p>Lorem Ipsum Donor</p>
 <p>Lorem Ipsum Donor</p>
</body>

CSS

p:nth-child(3){
 color: red;
}

In this case, the parent is the <body> element and the 3rd <p> element is colored red.
Let's examine a different scenario:
HTML

<body>
 <div>
  <p>Lorem Ipsum Donor</p>
  <p>Lorem Ipsum Donor</p>
  <p>Lorem Ipsum Donor</p>
  <p>Lorem Ipsum Donor</p>
  <p>Lorem Ipsum Donor</p>
 </div>

 <div>
  <p>Lorem Ipsum Donor</p>
  <p>Lorem Ipsum Donor</p>
  <p>Lorem Ipsum Donor</p>
  <p>Lorem Ipsum Donor</p>
  <p>Lorem Ipsum Donor</p>
 </div>
</body>

CSS

p:nth-child(3){
 color: red;
}

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

<body>
 <p>Lorem Ipsum Donor</p>
 <p>Lorem Ipsum Donor</p>
 <p>Lorem Ipsum Donor</p>
 <p>Lorem Ipsum Donor</p>
 <p>Lorem Ipsum Donor</p>
</body>

CSS

p:nth-of-type(3){
 color: red;
}

In this case, it will produce same result as :nth-child(3) in the previous example.

Difference between E:nth-child(n) and E:nth-of-type(n)

These is a major difference between the two. Let's examine them by examples.
HTML

<body>
 <h1>Hello World!</h1>
 <p>Lorem Ipsum Donor 1</p>
 <p>Lorem Ipsum Donor 2</p>
 <p>Lorem Ipsum Donor 3</p>
 <p>Lorem Ipsum Donor 4</p>
 <p>Lorem Ipsum Donor 5</p>
</body>

The structure is no more the same as in the previous case.
CSS

p:nth-of-type(3){
 color: red;
}

nth-of-type(3) will give the same result i.e.: color red the 3rd <p> element .
CSS

p:nth-child(3){
 color: red;
}

nth-child(3) will color red the 2nd <p> element since it is the 3rd child of its parent.

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

<p>Lorem Ipsum Donor</p>
<p>Lorem Ipsum Donor</p>
<p>Lorem Ipsum Donor</p>
<p>Lorem Ipsum Donor</p>
<p>Lorem Ipsum Donor</p>

CSS

p:first-child{
 color: green;
}
p:last-child{
 color: red;
}

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

<h1>Hello World!</h1>
<p>Lorem Ipsum Donor 1</p>
<p>Lorem Ipsum Donor 2</p>
<p>Lorem Ipsum Donor 3</p>
<p>Lorem Ipsum Donor 4</p>
<p>Lorem Ipsum Donor 5</p>

CSS

p:first-of-type{
 color: green;
}
p:last-of-type{
 color: red;
}

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

<div>
 <p>Lorem Ipsum Donor 1</p>
</div>

<div>
 <p>Lorem Ipsum Donor 1</p>
 <p>Lorem Ipsum Donor 1</p> 
</div>

CSS

p:only-child{
 color: green;
}

In this case, p:only-child colors the <p> element of the first <div> element.
HTML

<div>
 <h1>Hello World!</h1>
 <p>Lorem Ipsum Donor 1</p>
</div>

<div>
 <h1>Hello World!</h1>
 <p>Lorem Ipsum Donor 1</p>
 <p>Lorem Ipsum Donor 1</p> 
</div>

CSS

p:only-of-type{
 color: green;
}

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

<div></div>
<div>
 Hello World!
</div>

CSS

div:empty{
 width: 100px;
 height: 100px;
 background: green;
}

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

<p>Lorem Ipsum Donor 1</p>
<p>Lorem Ipsum Donor 2</p>
<p>Lorem Ipsum Donor 3</p>
<p>Lorem Ipsum Donor 4</p>
<p>Lorem Ipsum Donor 5</p>

CSS

p:not(:first-child){
 color: green;
}

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.

16 CSS3 Selectors You Should Know

16 CSS3 Selectors You Should Know

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:

E[foo^="bar"]

E[foo$="bar"]

E[foo*="bar"]

The :root selector

E:nth-child(n)

E:nth-last-child(n)

E:nth-of-type(n)

Difference between E:nth-child(n) and E:nth-of-type(n)

E:nth-last-of-type(n)

E:first-child and E:last-child

E:first-of-type and E:last-of-type

E:only-child and E:only-of-type

E:empty

E:not(s)

Conclusion

Post a Comment

Popular Posts

16 CSS3 Selectors You Should Know

16 CSS3 Selectors You Should Know

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:

E[foo^="bar"]

E[foo$="bar"]

E[foo*="bar"]

The :root selector

E:nth-child(n)

E:nth-last-child(n)

E:nth-of-type(n)

Difference between E:nth-child(n) and E:nth-of-type(n)

E:nth-last-of-type(n)

E:first-child and E:last-child

E:first-of-type and E:last-of-type

E:only-child and E:only-of-type

E:empty

E:not(s)

Conclusion

Share to:

Next

Newer Post

Previous

Older Post

Post a Comment