3.1 Pseudo-class :first-child
Structural pseudo-classes in CSS let you select and style elements based on their position in the document tree.
This is super handy for crafting more precise and detailed styles applied to specific elements.
Let's dive into the pseudo-classes :first-child, :last-child, :nth-child, and :nth-of-type.
The :first-child pseudo-class picks the first child element of its parent. It's great for styling the first
element in a group of similar elements, like lists or paragraphs.
Syntax:
selector:first-child {
properties: values;
}
Example of Use
In this example, the first list item is bolded and colored red, and the first paragraph inside a div is transformed to uppercase:
/* Styling the first list item */
li:first-child {
font-weight: bold;
color: red;
}
/* Styling the first paragraph in a div */
div p:first-child {
text-transform: uppercase;
}
3.2 Pseudo-class :last-child
The :last-child pseudo-class picks the last child element of its parent. It's used
for styling the last element in a group of similar elements.
Syntax:
selector:last-child {
properties: values;
}
Example of Use
In this example, the last list item is italicized and colored blue, and the last paragraph inside a div is underlined:
/* Styling the last list item */
li:last-child {
font-style: italic;
color: blue;
}
/* Styling the last paragraph in a div */
div p:last-child {
text-decoration: underline;
}
3.3 Pseudo-class :nth-child
The :nth-child pseudo-class allows you to select elements based on their position in a group. It takes an argument
that determines which elements will be chosen. The argument can be a number, keyword, or expression.
Syntax:
selectornth-child(argument) {
properties: values;
}
Arguments:
- Number: selects the element at the specified position
- Keywords:
oddandeven - Expression: format
an+b, whereaandbare numbers
Example 1: Selecting Odd Elements
In this example, all odd list items are styled with a light gray background:
/* Styling odd list items */
li:nth-child(odd) {
background-color: #f0f0f0;
}
Example 2: Selecting Elements at a Specific Position
In this example, the third list item is bolded and colored green:
/* Styling the third list item */
li:nth-child(3) {
font-weight: bold;
color: green;
}
Example 3: Using Expressions
In this example, every second element starting from the first is styled with a light gray background:
/* Styling every second item starting from the first */
li:nth-child(2n+1) {
background-color: #e0e0e0;
}
3.4 Pseudo-class :nth-of-type
The :nth-of-type pseudo-class is similar to :nth-child, but it selects elements based on their type among
sibling elements. This allows you to choose specific types of elements, even if they're not the first child of their parent.
Syntax:
selector:nth-of-type(argument) {
properties: values;
}
Arguments:
- Number: selects the element at the specified position among elements of the same type
- Keywords:
oddandeven - Expression: format
an+b, whereaandbare numbers
Example 1: Selecting Even Paragraphs
In this example, all even paragraphs are styled with a light gray background:
/* Styling even paragraphs */
p:nth-of-type(even) {
background-color: #d0d0d0;
}
Example 2: Selecting Elements at a Specific Position Among One Type
In this example, the second h2 heading is enlarged and colored orange:
/* Styling the second h2 heading */
h2:nth-of-type(2) {
font-size: 2em;
color: orange;
}
Example 3: Using Expressions
In this example, every third list item starting from the second is styled with a light gray background:
/* Styling every third item starting from the second */
li:nth-of-type(3n+2) {
background-color: #c0c0c0;
}
GO TO FULL VERSION