Discuss structural Pseudo-classes in CSS3 with example.

1views

written 8.4 years ago by

teamques10 ★ 68k

• modified 8.4 years ago

Structural Pseudo Classes:

Structural Pseudo-classes allow the selection of elements on the basis of the structure of the entire HTML document, which includes the position of each element and the number of times the occurrence of an element in the document.
A browser treats an HTML document as a tree of nodes, where the nodes are represented by elements and their child elements.
They allow you to select these nodes and calculate the position of a child node in the node list of a parent node or element.

Table lists the structural pseudo-classes available in CSS3:

CSS Structural pseudo-classes

Method	Description
E:root	Selects the element E that is the root of the document, which in a HTML document is the HTML element.
E:first-child	Selects the element E that is the first child of its parent.
E:last-child	Selects the element E that is the last child of its parent.
E:nth-child(n)	Selects the element E that is the nth child of its parent. Example: li:nth-child (1) /selects the first child of a parent if it's a LI element./,Do not confuse the above example with "selecting the first LI element of a parent." li: nth-child (1) selects the first child of a parent if it happens to be a LI, not the first LI of a parent. For the later, you'll need to use E:nth-of-type(n) below.
E:nth-last-child(n)	Selects the element E that is the nth child of its parent counting from the last, or reverse of :nth-child(n). Example: li:nth-last-child(1) /selects the last child of a parent if it's a LI element./,Same precautionary note as for E:nth-child(n) above.
E:nth-of-type(n)	Selects the element E that is the nth sibling amongst its peers of the same type within their parent. Similar to E:nth-child(n) above, though instead of simply selecting the nth element of some parent, you are now selecting the nth element of a particular type.,Example:,ul li:nth-of-type(1) /selects the first LI of every UL on the page, including nested ULs/ p:nth-of-type(odd) /selects all ODD paragraphs on the page/
E:nth-last-of-type(n)	Selects the element E that is the nth sibling amongst its peers of the same type, counting from the last, on the page. Example: option:nth-last-of-type(2) /selects the 2nd to last option within each SELECT/ option:nth-last-of-type(-n+3) /selects the last 3 options within each SELECT/
E:first-of-type	Selects the element E that is the first sibling of its type in a list of children of its parent element. Example:,p>quote:first-of-type /selects the first quote element within each paragraph/
E:last-of-type	Selects the element E that is the last sibling of its type in a list of children of its parent element. Example: tr>td:last-of-type /selects the last cell of each table row/
E:only-of-type	Selects the element E that has a parent element and whose parent element has no other children element of the same type, In other words, the selected element is the only one of its kind within the parent. Example: div>p:only-of-type /selects a paragraph that is the only paragraph within a DIV/ input[type="radio"]:only-of-type /selects a radio button if it's the only one inside a form/
E:only-child	Selects the element E that is the one and only child within its parent regardless of type. Example: div>p:only-child /selects a paragraph that is the only element in a DIV/
E:empty	Selects the element E that has no children at all (including text nodes). HTML comments do not affect whether the element is empty or not. Take a look at the following: Empty Elements: Non Empty: Welcome to JavaScript Kit

Example:

Code:

CSS:
<style type="text/css">
#sampletable th{
background: silver;
}
#sampletable tr:nth-of-type(odd){ /*odd rows*/
background: lightyellow;
}
#sampletable tr:nth-of-type(even){ /*even rows*/
background: lightblue;
}
#sampletable tr>td:first-of-type{ /*first cell of each row*/
font-weight: bold;
}
</style>

HTML:
<table id="sampletable" border="1" width="80%">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>George</td>
<td>30</td>
</tr>
<tr>
<td>Sarah</td>
<td>26</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
</tr>
<tr>
<td>Collin</td>
<td>32</td>
</tr>
</table>

Output:

Demo (requires FF 3.1+, Safari 3.1+, or IE8+):

enter image description here

ADD COMMENT EDIT