CSS structural classes
Structural pseudo classes allow access to the child elements present within the hierarchy of parent elements. We can select first-child element, last-child element, alternate elements present within the hierarchy of parent elements.
The following is the list of structural classes.
1. :first-child
:first-child represents the element that is prior to its siblings in a tree structure.
Example
<style>
table tr:first-child{
background-color:gray;
}
</style>
Try </>
2. :nth-child(n)
:nth-child(Expression) class applies CSS properties to those elements that appear at the position evaluated by the resultant of an expression. The expression evaluates to a value resulting in the position of the element in a tree structure.
For example, :nth-child(2n+1) pseudo class applies to the rows of table that appear at the position of the given expression.
tr:nth-child(2n+1) represents rows such as 1th, 3th, 5th, 7th.... for the n values of 0, 1, 2, 3.......
Example
<style>
table tr:nth-child(2n+1){
background-color:gray;
}
</style>
Try </>
It means the background-color of the 1th, 3th, 5th , etc, element is gray.
3. :last-child
:last-child pseudo class represents the element that is at the end of its siblings in a tree structure.
Example
<style>
ul li:last-child{
background-color:lightblue;
}
</style>
Try </>
It means the background-color of the last child of unordered list is lightblue.
4. :nth-last-child(n)
:nth-last-child(Expression) is the same as :nth-child(Expression) but the positioning of elements start from the end.
tr:nth-last-child(2n+1) represents last row, 3th last row, 5th last row, etc, element.
Example
<style>
table tr:nth-last-child(2n+1){
background-color:lightblue;
}
</style>
Try </>
:nth-last-child(1) and :nth-last-child(2) means the last, 2nd last elements in the list of siblings.
5. :only-child
:only-child represents the element that is a sole child of the parent element and there is no other sibling.
Example
<style>
div p:only-child{
background-color:lightblue;
}
</style>
Try </>
It means the first and last elements are same.
6. :first-of-type
There might be more than one type of siblings under a common parent. It selects the first element of the one type of sibling.
Example
<style>
dl dd:first-of-type{
background-color:lightblue;
}
</style>
Try </>
In the above example, there are two types of siblings i.e. dd and dt. And we choose the <dl> element to apply the CSS properties. It is the same as :nth-child(1).
7. :nth-of-type(n)
There may be more than one elements of the same type under a common parent. :nth-of-type(Expression) represents those elements of the same type at the position evaluated by the Expression.
Example
<style>
tr td:nth-of-type(2n+1){
background-color:gray;
}
tr td:nth-of-type(2n){
background-color:lightblue;
}
</style>
Try </>
8. :last-of-type
:last-of-type represents the last element in the list of same type of siblings.
Example
<style>
dl dd:last-of-type{
background-color:lightblue;
}
</style>
Try </>
9. :nth-last-of-type(n)
It is the same as :nth-of-type(n) but it starts counting of position from the end instead of start.
Example
<style>
body > h2:nth-last-of-type(n+6){
color:blue;
}
</style>
Try </>
It means that the color of all <h2> elements is blue except the last five elements.
Was this article helpful?
