How To Use Structural Pseudo Classes and Pseudo Element Selectors

Posted: 26 Sep 2011 05:30 AM PDT

The last couple of weeks we’ve been looking at different types of css selectors. First we looked at the simple and attribute selectors and then we looked at combinators and some pseudo class selectors.

This week we’ll finish up with structural pseudo-classes and pseudo elements. I think you’ll find both have some practical applications for styling web pages.

Note: Once again a reminder that the numbers in parenthesis represent which level css the selector was introduced in.

Structural Pseudo-Classes

Structural pseudo-classes were introduced as a way to target html elements based on information in the document tree that aren’t easily represented by simple selectors or combinators. Most were introduced in css3.

You may already be using a few of these. If you aren’t you likely find yourself wanting to target the elements they select. Without them we generally have to add a class or id to the element we’re targeting.

E:root (3) — matches an element E that’s the root of the document. In html this is always the html element.

 :root {background: blue;} html {background: blue;}

The lines of css above are functionally equivalent. Perhaps not the most useful structural pseudo-class, but the easiest to explain.

E:nth-child(n) (3) — matches an element E that’s the nth child of its parent.

Assuming we have a table with a large number of rows.

 tr:nth-child(4) {background: #ccc;}

The css above says to find the 4th row and give it a background color that’s a light gray.

A common use of the nth-child pseudo-class is coloring alternate rows of a table.

 tr:nth-child(2n+1) {background: #ccc;} tr:nth-child(2n) {background: #eee;}

2n+1 represents odd numbered rows and 2n represents even numbered rows. Special odd and even values can also be used.

 tr:nth-child(odd) {background: #ccc;} tr:nth-child(even) {background: #eee;}

You aren’t limited to 2 though. Any number can be used.

 tr:nth-child(10n+1) {background: #ccc;}

Here the 11th, 21st, 31st, etc rows would be given a light gray background.

E:nth-last-child(n) (3) — matches an element E that’s the nth child of its parent, counting from the last child.

nth-last child works similarly to nth-child, except that the count starts from the last element in the list as opposed to the first. Again assuming a table with a large number of rows.

 tr:nth-last-child(1) {background: #ccc;}

Here the last row is the one to get the background color.

 tr:nth-last-child(4) {background: #ccc;}

Here the 4th last row gets the background color.

All the same values can be used

 tr:nth-last-child(2n+1) {background: #ccc;} tr:nth-last-child(2n) {background: #eee;}

 tr:nth-last-child(odd) {background: #ccc;} tr:nth-last-child(even) {background: #eee;}

Both of the above would result in all odd and even rows getting different background colors. While you probably wouldn’t use nth-last-child for these, you could.

More typical use of nth-last-child is to target a specific or few specific items at the end of the list.

:nth-of-type and :nth-last-of-type

The rest of the structural pseudo-classes are plays on the above two so if you understand how the above two work all you’ll need to understand the rest is how they differ.

E:nth-of-type(n) (3) — matches an element E that’s the nth sibling of its type

E:nth-last-of-type(n) (3) — matches an element E that’s the nth sibling of its type, counting from the last one

nth-of-type() and nth-last-of-type() work the same way nth-child() and nth-last-child() work, the difference being that what we’re targeting has to be a specific type of element as opposed to any child element.

You’d use the of-type classes when the parent of the element you’re targeting has different types of elements as children.

 <div>  <p></p> < img src="" alt="" / >  <p></p>   <ul>     <li></li>     <li></li>   </ul>  <p></p> </div>

 p:nth-of-type(2) {font-size: 1.2em;} p:nth-last-of-type(1) {font-size: 1.2em;}

I’m sure you can figure out which paragraphs are targeted by the css above Again we’re using the of-type pseudo-classes because the elements inside the div are of mixed type.

:first-child and :last-child

These two pseudo-classes are shortcuts for nth-child(1) and nth-last-child(1). Like the two nth classes these require all the children to be of the same type.

E:first-child (2) — matches an element E that’s the first child of its parent

E:last-child (3) — matches an element E that’s the last child of its parent

A common use is in navigation bars when you want to style either the first, last or both menu items in the list differently than those in the middle of the bar.

Often I’ll add a border between menu items in navigation bars by setting either a left or right border. However that necessitates either adding a border to one end or removing it from the other. li:last-child and li:first-child come in handy for this.

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

These two elements are the functional equivalent of nth-of-type(1) and nth-last-of-type(1). They work the same as first-child and last-child except that they only target an element of a specific type.

E:first-of-type (3) — matches an element E that’s first sibling of its type.

E:last-of-type (3) — matches an element E that’s last sibling of its type.

Styling the first of last paragraph inside a div, article, or section might be a common use for the first and last of-type classes.

only-child and only-of-type

These next two elements are again similar except that they only target elements with a single child.

E:only-child (3) — matches an element E that’s the only child of its parent.

E:only-of-type (3) — matches an element E that’s the only sibling of its type.

With only-child you’d have only the one element inside the parent. With only-of-type you could have multiple children, but only the one type of element you’re targeting.

:empty

E:empty (3) — matches an element E that has no children (including text nodes)

:empty is a way to target empty tags. For example it wouldn’t match

 <p>Some text</p>

It would match

 <p></p>

Ideally you won’t leave any empty tags in your html so I’m not sure how useful this one is. Perhaps as a way to find and remove any empty tags you’ve accidentally left behind.

Pseudo Elements

There are some things we want to style in practice, but have no way at all to select based on information in the document tree.

Normally to select these items we’d have to add an element like a span and also give it some kind of class. Pseudo elements are a way to target these items.

We have 4 pseudo elements we can target

::first-line pseudo element

E::first-line (1) — matches the first formatted line of an element E.

 p:first-line {tex-transform: uppercase;}

The above changes the first line in all paragraphs to uppercase. Of course the first line of text can be somewhat dynamic if you’ve created a flexible layout and the browser width is varied.

::first-letter pseudo element

E::first-letter (1) — matches the first formatted letter of an element E.

Similar to first-line, first-letter styles only the first letter differently. An obvious use is to create drop caps.

 <p class="intro">This is the first paragraph</p>

 p.intro::first-letter {font-size:4em; font-weight:bold; color: #f00; float:left;}

::before and ::after pseudo elements

E::before (2) — matches generated content before an element E.

E::after (2) — matches generated content after an element E.

The ::before and ::after pseudo elements are ways to add content before or after an element. Common uses are to add a quote image before and after blockquotes or to use your own special bullet in front of a list.

 <blockquote></blockquote>

 blockquote::before {content: "&lsquo;"} blockquote::after {content: "&rsquo;"}

The above adds a single left quotation mark before the blockquote and a single right quotation mark after it.

While there will be times when you don’t specifically want to add any content you still need to include the content property with ::before and ::after. Leaving it blank is allowed, but it must be included.

 blockquote::before {content: "";}

You can do quite a lot with these two pseudo elements as seen in the video above or this demo for building a css solar system.

Double or Single Colon?

One note about all 4 pseudo elements is their use of a double colon out front.

This is technically the correct syntax however browsers that accept pseudo elements also allow a single colon and the double colon doesn’t work in all browsers.

For practical purposes you’re better off using the single colon for now so:

:first-letter
:last-letter
:before
:after

Browser Support

Generally browser support for pseudo elements is better than the structural pseudo classes, though it varies some. The elements will work as far back as IE8 and with first-letter and first-line support goes back to IE5.5. Yep, you read that right.

Most of the structural pseudo classes don’t start working until IE9, though support for first-child goes back to IE6.

Summary

Like the other selectors we’ve covered you may have already used some of these in practice, while others may be completely new to you.

You’ll find more support for the pseudo elements than the structural pseudo classes, but you can likely find practical uses for most everything mentioned here.

I hope this walk through of css selectors has been useful and brought to light a few selectors you may not use or be familiar with. I know that’s been the case for me and hopefully these posts will serve as a reminder for both of our development practice.