Pseudo Classes help to select and apply the styles for a particular or group of HTML elements.
Pseudo Class is used to apply the style to the specific element or group of elements.
Pseudo Class also help to ignore the style to the specific or group of HTML elements.
We can use the Pseudo class with CSS Classes.
Pseudo Classes denoted by ( : ) symbol.
If want learn more about selectors
Most Useful & Advance CSS3 Pseudo Classes
CSS Selectors That Every Developer Must Know
1) :not(selector)
: not(selector) helps to select and apply the styles to the particular or specified element not match.
Syntax
:not(selector) {
css declarations;
}{codeBox}
Example :
The below example will apply the style to the h4 element because we mentioned the: not(p) selector.
HTML
<h4>:not(p) - Attractive Aurora</h4>
<p>:not(p) - CSS Selectors</p>{codeBox}
CSS
:not(p) {
background: green;
}{codeBox}
Output
:not(p) - Attractive Aurora
:not(p) - CSS Selectors{codeBox}
2):nth-child() Selector
:nth-child() Pseudo selector helps to select the nth children from the parent group and apply the style to the specific child.
n should be a number or keyword.
Syntax
:nth-child(number) {
css declarations;
}{codeBox}
Example :
The below example nth-child(2n) will select every 2nd child from the parent and apply the style to the child.
Note: if you mentioned the number only nth-child(2), it will only select the 2nd child from the parent in the top order.
HTML
<div>
<p>:nth-child() - Pseudo Selectors Group 1</p>
<p>:nth-child() - CSS Selectors Group 1</p>
</div>
<div>
<p>:nth-child() - Pseudo Selectors Group 2</p>
<p>:nth-child() - CSS Selectors Group 2</p>
</div>{codeBox}
CSS
p:nth-child(2n) {
background: yellow;
}{codeBox}
Output
:nth-child() - Pseudo Selectors Group 1
:nth-child() - CSS Selectors Group 1
:nth-child() - Pseudo Selectors Group 2
:nth-child() - CSS Selectors Group 2{codeBox}
3):nth-last-child() Selector
:nth-last-child() Pseudo selector helps to select the nth children from the parent group and apply the style to the specific child.
n should be a number or keyword.
Syntax
:nth-last-child(number) {
css declarations;
}{codeBox}
Example :
The below example nth-last-child(2n) will select every 2nd child from the parent and apply the style to the child.
Note: if you mentioned the number only nth-last-child(2), it will only select the 2nd child from the parent in the bottom order.
Note: in the nth-last-child(), we can use odd and even it will select and apply the style to the odd child and even child.
HTML
<div>
<p>:nth-last-child(n) - Pseudo Selectors Group 1</p>
<p>:nth-last-child(n) - CSS Selectors Group 1</p>
</div>
<div>
<p>:nth-last-child(n) - Pseudo Selectors Group 2</p>
<p>:nth-last-child(n) - CSS Selectors Group 2</p>
</div>{codeBox}
CSS
p:nth-last-child(2n) {
background: orange;
}{codeBox}
Output
:nth-last-child(n) - Pseudo Selectors Group 1
:nth-last-child(n) - CSS Selectors Group 1
:nth-last-child(n) - Pseudo Selectors Group 2
:nth-last-child(n) - CSS Selectors Group 2{codeBox}
4):last-child() Selector
:last-child() Pseudo selector helps to select the last children from the parent group and apply the style to the child.
Syntax
:last-child {
css declarations;
}{codeBox}
Example :
The below example p:last-child it will select and apply the style of the last child from the parent.
Note : p:last-child is selector equals to p:nth-last-child(1) syntax.
HTML
<div>
<p>:last-child - Pseudo Selectors Group 1</p>
<p>:last-child - CSS Selectors Group 1</p>
</div>
<div>
<p>:last-child - Pseudo Selectors Group 2</p>
<p>:last-child - CSS Selectors Group 2</p>
</div>{codeBox}
CSS
p:last-child {
background: lightblue;
}{codeBox}
Output
:last-child - Pseudo Selectors Group 1
:last-child - CSS Selectors Group 1
:last-child - Pseudo Selectors Group 2
:last-child - CSS Selectors Group 2{codeBox}
5):nth-last-of-type() Selector
:nth-last-of-type() Pseudo selector helps to select the same type nth children from the parent group and apply the style to the specific child in bottom order.
n should be a number or keyword (even, odd, numbers).
Syntax
:nth-last-of-type(number) {
css declarations;
}{codeBox}
Example :
The below example nth-last-of-type(2n) will select every 2nd same type child from the parent and apply the style.
Note: if you mentioned number only nth-last-of-type(2), it will only select the 2nd same type child from a parent in the bottom order.
Note: in the nth-last-of-type(2n), we can use odd and even instead of number it will select and apply the style to the odd child and even child.
HTML
<div>
<p>:nth-last-of-type(n) - Pseudo Selectors Group 1</p>
<p>:nth-last-of-type(n) - CSS Selectors Group 1</p>
</div>
<div>
<p>:nth-last-of-type(n) - Pseudo Selectors Group 2</p>
<p>:nth-last-of-type(n) - CSS Selectors Group 2</p>
</div>{codeBox}
CSS
p:nth-last-of-type(2n) {
background: pink;
}{codeBox}
Output
:nth-last-of-type(n) - Pseudo Selectors Group 1
:nth-last-of-type(n) - CSS Selectors Group 1
:nth-last-of-type(n) - Pseudo Selectors Group 2
:nth-last-of-type(n) - CSS Selectors Group 2{codeBox}
I think this information is helpful to you.
Thanks for reading - Don't Forgot To Share & Comment
Any suggestion or queries please comment, our team will response asps.
You may like this :
Most Useful & Advance CSS3 Pseudo Classes
CSS Selectors That Every Developer Must Know
JavaScript Web API's That Every Developer Should Know
HTML API's That Every Developer Should Know