Css pseudo classes selectors use for many same name tag in particular one tag to give css. Css pseudo classes selectors main two types in one nth-child and second nth-of-type.

:root – This pseudo class select document root means first tag of the html document. Almost case in root pseudo class selects tag.

Child pseudo classes selectors

:first-child – This css pseudo class select this parent first child for example, if you use p:first-child, then it selects all p that the first child of its parent.

:nth-child(n) – This css pseudo class select this parent nth child for example, if you use p:nth-child(3) then it selects all p that third child of its parent.

:nth-last-child(n) – This almost same as nth-child, but this count n number from last child. This css pseudo class select this parent nth last child, for example, if you use p:nth-last-child(2) then it selects all p that from the last second child of its parent.

:last-child  –  This css pseudo class select this parent last child for example, if you use p:last-child, then it selects all p that the last child of its parent.

notice – In the below example, if you want to select a div tag then you need to give that neat number right for select that div. For example, if you write this code div: nth-child (2) than it nth select that div because that nth number is wrong so that whenever you want to select any tag that time you need to give right n number it compulsory in child type Pseudo Classes Selectors.

TRY IT NOW

Of-type pseudo classes selectors

:first-of-type – This css pseudo class select this parent first type of its tag. For example, if you use p:first-of-type, then it selects all every first p tag of its parent. for example, if you write div:first-of-type than it’s select first div tag of its parent. In below example div element is the 4th child of its parent, but div:first-of-type though directly you can select that div.

:nth-of-type(n) – This css pseudo class select this parent nth the type of its tag. for example, if you write div:nth-of-type(1) than it’s select first div tag of its parent. In below example div element is the 4th child of its parent, but div:nth-of-type(1) though directly you can select that div.

:nth-last-of-type(n) – This almost same as above nth-of-type, but in :nth-last-of-type css pseudo class in nth number count from last child.

:last-of-type – This css pseudo class select this parent last type of its tag. For example, if you use p:last-of-type, then it selects all every last p tag of its parent. for example, if you write div:last-of-type than it’s select last div tag of its parent. In below example div element is the 4th child of its parent, but div:last-of-type though directly you can select that div.

TRY IT NOW

only-type and child pseudo classes selectors

:only-of-type – Selects with multiple child, but when select element only one found in his parent that time we need :only-of-type css pseudo class selector.

:only-child – Selects only if one child with his parent. If there two children found, then only-child not work for that.

TRY IT NOW