CSS Pseudo Classes :

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it.
• Style visited and unvisited links differently.
• Style an element when it gets focus.

Syntax of the Pseudo class:

selector:pseudo-class {
 property: value;
}

For example, lets take the anchor tag and add some pseudo-classes to it.

a:link{
color: red;
} → the anchor element will be in red color initially. (unvisited link).

a:visited{
color: blue;
} → the anchor element turns into blue color once it is visited.

a:hover{
color: green;
} → the anchor element turns into green color, when we hover over the element using the mouse.

a:active{
color: pink;
} → the anchor element turns into pink color once it is selected.

We can also combine pseudo-classes with HTML-classes.
For eg,
div: hover .n-container{
background-color: red;
}

Here, we are saying that, when we hover the div, the element with the class name .n-container should change its background color to red. Likewise we can add multiple classes.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

The :first-child pseudo class:

The first-child pseudo class matches a specified element that is the first child of another child.
eg:

p:first-child {
color: blue;
}

In this, the paragraph element changes to blue color if the element is the first child of any other element. (i.e) where ever the paragraph element is present, if it is the first element of its parent, then the style will be applied only to it.

Here, the first para element is in blue color because it is the first child-para element to the body and the second blue para is the first-child-para of the div tag.

p:first-child i {
  color: blue;
}

In this, it matches all the i elements which is the first-child of para elements.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Note: Here we have used para element for example. But we can use all other elements also.

:checked → Selects every checked <input> elements.
eg:
input: checked{}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:disabled → Selects every disabled <input> elements.
eg:
input: disabled{}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:empty: → Selects every <p> element that has no children.
eg:
p:empty{}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:enabled → Selects every enabled <input> element.
eg:
input: enabled{}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:first-of-type → Selects every <p> element that is the first <p> element of its parent.
eg:
p:first-of-type{}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:focus→ Selects the <input> element that has focus.
eg:
input: focus{}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:last-child → Selects every <p> elements that is the last child of its parent.
eg:
p:last-child{}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:last-of-type → Selects every <p> element that is the last <p> element of its parent.
eg:
p:last-of-type{}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:not(selector) → Selects every element that is not a <p> element.
eg:
:not(p){}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:nth-child(n) → Selects every <p> element that is the nth child of its parent.
eg:
p:nth-child(2){} , In this it selects the para element which is the second child of its parent.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:nth-last-child(n) → Selects every <p> element that is the nth child of its parent, counting from the last child.
eg: p:nth-last-child(2){} , In this, it selects the para element which is the second child of its parent counting from the last child.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:nth-last-of-type(n) → Selects every <p> element that is the second <p> element of its parent, counting from the last child.
eg:
p:nth-last-of-type(2){}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

:only-child → Selects every <p> element that is the only child of its parent.
eg:
p:only-child{}
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —