Structural and relational pseudo-class selectors

This lesson focuses on structural and relational pseudo-class selectors.

Structural pseudo-class selectors

Structural pseudo-class selectors select additional information from the DOMDOM, which can’t be targeted otherwise.

The :root selector selects the highest element in a document. This is almost guaranteed to be the <html> element, unless we’re using a different markup language, such as SVG or XML.

:root {
    background-color: coral;
}

We’ve set the background-color to coral in our example. We could also use html as the selector to set our background. However, :root is more specific than an element selector, which could be helpful in some scenarios.

The :first-child selector selects the first element within its parent element. The first li element will have red text, as shown in the example below:

HTML:

<ul>
    <li>This text will be red.</li>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum.</li>
</ul>

CSS:

li:first-child {
    color: red;
}

The :last-child selector selects the last element within its parent element.The last li element will have red text, as shown in the example below:

HTML:

<ul>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum.</li>
    <li>This text will be red.</li>
</ul>

CSS:

li:last-child {
    color: red;
}

The :nth-child() selector uses a simple formula to select elements depending on their order. All :nth pseudo-classes take an argument via a formula. The formula may be a single integer or structured as an+b, or it could use the keywords odd or even.

In the an+b formula:

  • The a is a number.
  • The n is a literal number and will represent a value assigned to the variable n.
  • The + is an operator (it may also be set to the minus sign (-)).
  • The b is an optional number (it’s only required if an operator is being used).

Let’s work with the list of elements below to see this in action!

HTML:

<ol>
    <li>Pacific Ocean</li>
    <li>Atlantic Ocean</li>
    <li>Indian Ocean</li>
    <li>Southern Ocean</li>
    <li>Arctic Ocean</li>
    <li>Philippine Sea</li>
    <li>Coral Sea</li>
    <li>Arabian Sea</li>
    <li>South China Sea</li>
</ol>

CSS:

Select the second child, “Atlantic Ocean”, and set the color to yellow:

ol :nth-child(2) {
    color: yellow;
}

Select every other child (beginning from the second). So, “Atlantic Ocean”, “Southern Ocean”, “Philippine Sea” and “Arabian Sea” will be purple:

ol :nth-child(2n) {
    color: purple;
}

The code below selects all evenly-numbered children:

ol :nth-child(even) {
    color: yellow;
}

The code below selects every other child, starting from the fifth (demonstrated by the +5). So, “Arctic Ocean”, “Coral Sea”, and “South China Sea” will be purple:

ol :nth-child(2n+5) {
    color: purple;
}

Note: 2nn designates any items whose position is a multiple of 2, while 5 is the offset from where it should start.

The :nth-of-type() selector is similar to the :nth-child. However, it’s used in places where different elements are at the same level. The selector matches each element of the nth-child of a particular type.

For example, suppose we have a <div> element containing several paragraphs and images. If we want to select the odd images, the :nth-child won’t work. We need to use div img:nth-of-type(odd) instead.

The :first-of-type selector selects the first element of its particular type within the parent element.

For example, the first li and first span element are given red text below:

HTML:

<ul>
    <li>This text will be red.</li>
    <li>Lorem ipsum. <span>This text will be red.</span></li>
    <li>Lorem ipsum.</li>
</ul>

CSS:

ul :first-of-type {
    color: red;
}

The :last-of-type selector is the same as above, but selects the last element:

HTML:

<ul>
    <li>Lorem ipsum. <span>Lorem ipsum.</span> <span>This text will be red.</span></li>
    <li>Lorem ipsum.</li>
    <li>This text will be red.</li>
</ul>

CSS:

ul :last-of-type {
    color: red;
}

The :nth-last-of-type() selector is similar to :nth-of-type, only it counts in reverse (from the bottom up).

The :nth-last-child() selector is similar to :nth-child, but it also counts in reverse.

The :only-of-type selector selects an the element only if it’s one-of-a-kind (within its parent).

Example

Get hands-on with 1400+ tech skills courses.