Hello Friends, In this tutorial  I am going to show you how to apply CSS using Element Selectors on different DOM element.

Introduction:

Selectors that specify the selection criteria based on the names of the elements are called the elements selectors.

Different type of Element Selectors:

1- element1 ~ element2:

Syntax:

div~ul

{

// Your CSS goes here

}

This type of selector selects every element that is a sibling of an element. In the above example, css will apply on every ul element inside the div.

2- :first-of-type:

Syntax:

div:first-of-type

{

// Your CSS goes here

}

This type of selectors selects every first element of its parent element(div)

.

3- last-of-type:

Syntax:

div:last-of-type

{

// Your CSS goes here

}

This type of selectors selects every last element of its parent element (div) .

4- nth-child(n):

Syntax:

div:nth-child(2)

{

//CSS declaration

}

This selectors selects every <div> element that is the second child of its parent.

5- :nth-last-child(n):

Syntax:

div:nth-last-child(2)

{

//CSS declaration

}

The Selector selects every <div> element that is the second last child of its parent.

6- :only-of-type:

Syntax:

div:only-of-type

{

//CSS declaration

}

The Selector selects every <div> element that is the only <div> element of its parent.

7- nth-of-type(n):

Syntax:

tr:nth-of-type(2)

{

//CSS Declaration

}

The nth-of-type(n) Selector is used to select every matching element that is the nth child of a particular type of the parent.

View More:

Conclusion:

I hope you understand this tutorial about element selectors in CSS. Your Feedback, Comments, and Suggestions are always welcome to me.

Thank You.

Leave a Comment