What are Css Pseudo-Classes? Example of commonly used pseudo-classes.

A pseudo-class in CSS is a keyword that defines the special state of an element. A special state includes hovering, clicking, focusing, selecting an element, etc. A pseudo-class is applied on a selector(they are used to select the content you want to style) for adding a special effect on the basis of a particular state of an element.

Syntax:

selector: pseudo-class{
    property :value;
}

=> The most commonly used pseudo-classes are as follows :

1.  : link

–> Select unvisited links.
i.e.

a: link {
  background-color: gold;
  color: green;
}

2. : visited

-> use this class to add a special style to a visited link.
i.e.

a: visited {
    color: forest green;
    text-decoration-color: hot pink;
}

3. : hover

-> Use this class to add a special style to an element when you mouse over it.

i.e.

.Btn {
    width: 10em;
    height: 5ex;
    background-color: gold;
    border: 2px solid firebrick;
    border-radius: 10px;
    cursor: pointer;
}

.Btn: hover {
    background-color: bisque;
}

4.  : active

-> Use this class to add a special style to an active element.

i.e.

.joinBtn {
    width: 10em;
    height: 5ex;
    background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
    border: none;
    border-radius: 5px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

.joinBtn: active {
    border: 2px 2px 5px #fc894d;
}

5. : Focus

-> Use this class to add a special style to an element while the element has focus.

i.e.

label {
    display: block;
    margin-top: 1em;
}

input: focus {
    background-color: lightblue;
}

select: focus {
    background-color: ivory;
}

6. :nth-child(n) :

-> The  :nth-child(n) selector matches every element that is the nth child of its parent.

i.e.

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20%;
}
.parent {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}
.child {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}

.child:nth-child(3){
    background-color: darkblue;
}