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?

 

Email:

Message: