codescracker


css

CSS Structural Pseudo-Classes



« Previous Tutorial Next Tutorial »


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 allow 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 in 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:

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
    color: red;
} 
</style>
</head>
<body>

<p>This first Paragraph</p>
<p>This second Paragraph</p>

</body>
</html>

Here is the live demo output of the above CSS example:

This first Paragraph

This second Paragraph

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

Following is the live demo output produced by the above CSS example:

This is first sentence of first paragraph. This is second sentence of first paragraph.

This is first sentence of second paragraph. This is second sentence of second paragraph.

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

Below is the live demo output of this CSS example:

This is first sentence of first paragraph. This is second sentence of first paragraph.

This is first sentence of second paragraph. This is second sentence of second paragraph.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test