Structural pseudo-classes allow the selection of elements on the basis of structure of the entire HTML document, which includes the position of each element and number of times the occurrence of an element in the document.
A browser treats an HTML document as a tree of nodes, where nodes are represented by elements and their child elements.
Structural pseudo-classes allows you to select these nodes and calculate the position of a child node in the node list of a parent node or element.
The following table lists the structural pseudo-classes available in CSS3 :
| Pseudo-Class | Description |
|---|---|
| :root | Selects the root element of a document. In HTML, the root element is always the HTML element. The following code fragments perform the same task: :root{background-color:red;} html{background-color:red;} |
| :nth-child(N) | Selects the elements on the basis of their position within the child elements of a parent element. The :nth-child() pseudo-class is applied to
an element that has a fixed number of child elements. The following code fragments applies the specified style to all P elements that are the third child of their parent element: p:nth-child(3){color:blue;} |
| :nth-last-child(N) | Selects the elements just as the :nth-child(N) pseudo-class selects but starts the counting from the last child and counts backwards. The following code snippet applies the specified style to the second-last TR element of a table : tr:nth-last-child(2) { background-color:#ff0; } |
| :nth-of-type(N) | Selects the elements on the basis of their position and type within the child elements of a parent element. The :nth-child() pseudo-class, but it only
counts the elements that are of the same type as the element to which the rule is applied. The following code snippet applies the specified style to every P element, which is the third p element of its parent : p:nth-of-type(3) {background-color:#ff0;} |
| :nth-last-of-type(N) | Selects the elements just as the :nth-of-type(N) pseudo-class selects but starts the counting from the last child and counts backwards. The following code snippet applies the specified style to each second-last child element of type P: p:nth-last-of-type(2) {background-color:#ff0;} |
| :first-child | Selects the first child element of its parent element. The following code snippet applies the specified style to all P elements that are the first child of their parent element: p:first-child {background-color:#ff0;} |
| :last-child | Selects the last child element of its parent element. The following code snippet applies the specified style to all P elements that are the last child of their parent element: p:last-child {background-color:#ff0;} |
| :first-of-type | Selects the first child element of the specified element type. The following code snippet applies the specified style to the first child element of type P: p:first-of-type {background-color:#fff0;} |
| :last-of-type | Selects the last child element of the specified element type. The following code snippet applies the specified style to the last child element of type P: p:last-of-type {background-color:#ff0;} |
| :only-child | Selects an element if it is the only child element of its parent element. The :only-child pseudo-class targets an element whose parent element
has no other element children. The following code snippet applies the specified style to every P element that has only one child element: p:only-child {background-color:#ff0;} |
| :only-of-type | Selects an element, which is the only child element of its parent element type. The following code snippet applies the specified style to every P element, which is the only child element of its parent element type: p:only-of-type {background-color:#ff0;} |
| :empty | Selects the elements that have no child elements. The following code snippet applies the specified style to every empty P element: p:empty {background-color:#ff0;} |
Now let's learn about some important structural pseudo-classes available in CSS with examples.
The :first-child pseudo-class matches a specified element that is the first child of another element
Note - For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared
Let's look at the following example, where the selector matches any <p> element that is the first child of any element. This example shows how to match first paragraph and change their style using CSS structural pseudo-class.
<!DOCTYPE html>
<html>
<head>
<title>CSS Structural Pseudo Class Example</title>
<style>
p:first-child { color:red; }
</style>
</head>
<body>
<p>This first Paragraph.</p>
<p>This second Paragraph.</p>
</body>
</html>
Here is the sample output produced by the above CSS structural pseudo-class example code:
Let's look at the following example, where the selector matches the first <i> element in all <p> elements:
<!DOCTYPE html>
<html>
<head>
<title>CSS Structural Pseudo Class Example</title>
<style>
p i:first-child { color:red; }
</style>
</head>
<body>
<p>This is first <i>sentence</i> of first paragraph.
This is second <i>sentence</i> of first paragraph.</p>
<p>This is first <i>sentence</i> of second paragraph.
This is second <i>sentence</i> of second paragraph.</p>
</body>
</html>
Below is the sample output of the above structural pseudo class example code in CSS:
Let's look at the following example, where the selector matches all the <i> elements in the <p> elements that are the first child of another element:
<!DOCTYPE html>
<html>
<head>
<title>CSS Structural Pseudo Class Example</title>
<style>
p:first-child i { color:red; }
</style>
</head>
<body>
<p>This is first <i>sentence</i> of first paragraph.
This is second <i>sentence</i> of first paragraph.</p>
<p>This is first <i>sentence</i> of second paragraph.
This is second <i>sentence</i> of second paragraph.</p>
</body>
</html>
Following is the output produced by the above CSS structural pseudo class example code:
