Part 2: Pseudo-Classes
Learn about CSS pseudo-class selectors.
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
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 variablen
. - 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: 2 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 1200+ tech skills courses.