The Complete Beginner’s Guide to CSS/

...

/

Part 2: Pseudo-Classes

Part 2: Pseudo-Classes

Learn about CSS pseudo-class selectors.

We'll cover the following...

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 ...

Ask