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.
CSS Structural Pseudo-Classes Lists
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.
CSS :first-child Pseudo-class
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
Match First <p> Element
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:
Match First <i> Element in All <p> Elements
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:
Match All <i> Elements in All First Child <p> Elements
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:
CSS Online Test
« Previous Tutorial
Next Tutorial »
