Pseudo-classes

Pseudo-classes are similar to regular classes in HTML however they are not directly stated within the markup, instead they are a dynamically populated as a result of users actions or the document structure. The most common pseudo-class, and one you’ve likely seen before, is :hover. Notice how this pseudo-class begins with the colon character, :, as will all other pseudo-classes.

Link Pseudo-classes

Some of the more basic pseudo-classes include two revolving around links specifically. The :link and :visited pseudo-classes define if a link has or hasn’t been visited. To style an anchor which has not been visited the :link pseudo-class comes into play, where the :visited pseudo-class styles links that a user has already visited based on their browsing history.

a:link {...}
a:visited {...}

User Action Pseudo-classes

Based on a users actions different pseudo-classes may be dynamically applied to an element, of which include the :hover, :active, and :focus pseudo-classes. The :hover pseudo-class is applied to an element when a user moves their cursor over the element, most commonly used with anchor elements. The :active pseudo-class is applied to an element when a user engages an element, such as clicking on an element. Lastly, the :focus pseudo-class is applied to an element when a user has made an element the focus point of the page, often by using the keyboard to tab from one element to another.

a:hover {...}
a:active {...}
a:focus {...}

User Interface State Pseudo-classes

As with the link pseudo-classes there are also some pseudo-classes generated around the user interface state of elements, particularly within form elements. These user interface element state pseudo-classes include :enabled, :disabled, :checked, and :indeterminate.

The :enabled pseudo-class selects an input that is in the default state of enabled and available for use, where the :disabled pseudo-class selects an input that has the disabled attribute tied to it. Many browsers by default will fade out disabled inputs to inform users that the input is not available for interaction, however those styles may be adjusted as wished with the :disabled pseudo-class.

input:enabled {...}
input:disabled {...}

The last two user interface element state pseudo-classes of :checked and :indeterminate revolve around checkbox and radio button input elements. The :checked pseudo-class selects checkboxes or radio buttons that are, as you may expect, checked. When a checkbox or radio button has neither been selected or unselected it lives in an indeterminate state, from which the :indeterminate pseudo-class can be used to target these elements.

input:checked {...}
input:indeterminate {...}

Structural & Position Pseudo-classes

A handful of pseudo-classes are structural and position based, in which they are determined based off where elements reside in the document tree. These structural and position based pseudo-classes come in a few different shapes and sizes, each of which provides their own unique function.

1.:first-child, :last-child, & :only-child

The first structural and position based pseudo-classes one is likely to come across are the :first-child, :last-child, and :only-child pseudo-classes. The :first-child pseudo-class will select an element if it’s the first child within its parent, while the :last-child pseudo-class will select an element if it’s the last element within its parent. These pseudo-classes are prefect for selecting the first or last items in a list and so forth. Additionally, the :only-child will select an element if it is the only element within a parent. Alternately, the :only-child pseudo-class could be written as :first-child:last-child, however :only-child holds a lower specificity.

li:first-child {...}
li:last-child {...}
div:only-child {...}

<ul>
  <li>This list item will be selected</li>
  <li>
    <div>This div will be selected</div>
  </li>
  <li>
    <div>...</div>
    <div>...</div>
  </li>
  <li>This list item will be selected</li>
</ul>

2.:first-of-type, :last-of-type, & :only-of-type

Finding the first, last, and only children of a parent is pretty helpful, and often all that is needed. However sometimes you only want to select the first, last, or only child of a specific type of element. For example, should you only want to select the first or last paragraph within an article, or perhaps the only image within an article. Fortunately this is where the :first-of-type, :last-of-type, and :only-of-type pseudo-selectors come into place.

The :first-of-type pseudo-class will select the first element of its type within a parent, while the :last-of-type pseudo-class will select the last element of its type within a parent. The :only-of-type pseudo-class will select an element if it is the only of its type within a parent.

p:first-of-type {...}
p:last-of-type {...}
img:only-of-type {...}

<article>
  <h1>...</h1>
  <p>This paragraph will be selected</p>
  <p>...</p>
  <img src="#"><!-- This image will be selected -->
  <p>This paragraph will be selected</p>
  <h6>...</h6>
</article>

Lastly there are a few structural and position based pseudo-classes that select elements based on a number or an algebraic expression. These pseudo-classes include :nth-child(n), :nth-last-child(n), :nth-of-type(n), and :nth-last-of-type(n). All of these unique pseudo-classes are prefixed with nth and accept a number or expression inside of the parenthesis, indicated by the character n argument.

3.Using Pseudo-class Numbers & Expressions

As mentioned, using numbers outright within a pseudo-class will count from the beginning, or end, of the document tree and select one element accordingly. For example, the li:nth-child(4) selector will select the fourth list item within a list. Counting begins with the first list item and increases by one for each list item, until finally locating and selecting the forth item. When using a number outright it must be a positive number.

Expressions for pseudo-classes fall in the format of an, an+b, an-b, n+b, -n+b, and -an+b. The same expression may be translated and read as (a×n)±b. The a variable stands for the multiplier in which elements will be counted in while the b variable stands for where the counting will begin or take place.

For example, the li:nth-child(3n) selector will identify every third list item within a list. Using the expression this equates to 3×0, 3×1, 3×2, and so forth. As you can see the results of this expression lead to the third, sixth, and every element a multiple of three being selected.

Additionally, the odd and even keyword values may be used. As expected, these will select odd or even elements respectively.

Using the li:nth-child(4n+7) selector will identify every forth list item starting with the seventh list item. Again, using the expression this equates to (4×0)+7, (4×1)+7, (4×2)+7, and so forth. The results of this expression leading to the seventh, eleventh, fifteenth, and every element a multiple of four here on out being selected.

4.:nth-child(n) & :nth-last-child(n)

Changing from the :nth-child(n) pseudo-class to the :nth-last-child(n) pseudo-class switches the direction of counting, with counting starting from the end of the document tree using the :nth-last-child(n) pseudo-class.

5.:nth-of-type(n) & :nth-last-of-type(n)

Target Pseudo-class

The :target pseudo-class is used to style elements when an element’s ID attribute value matches that of the URI fragment identifier. The fragment identifier within a URI can be recognized by the hash character, #, and what directly follows it. The URL http://example.com/index.html#hello includes the fragment identifier of hello. When this identifier matches the ID attribute value of an element on the page,

section:target {...}

<section id="hello">...</section>

Empty Pseudo-class

The :empty pseudo-class allows elements that do not contain children or text nodes to be selected. Comments, processing instructions, and empty text nodes are not considered children and are not treated as such.

div:empty {...}

Negation Pseudo-class

The negation pseudo-class, :not(x), is a pseudo-class that takes an argument which is filtered out from the selection to be made. The p:not(.intro) selector uses the negation pseudo-class to identify every paragraph element without the class of intro. The paragraph element is identified at the beginning of the selector followed by the :not(x) pseudo-class. Inside of the parentheses falls the negation selector, the class of .intro in this case.

div:not(.awesome) {...}
:not(div) {...}

Pseudo-classes Overview