CSS Pseudo-classes Selector

Pseudo-classes selectors in CSS allow you to target elements based on specific states or conditions.

Pseudo-classes are denoted with a colon (:) followed by the name of the pseudo-class.

Here are a few examples of pseudo-class selectors and how they can be used for element manipulation:

:hover Pseudo-class

        
            a:hover {
   color: red;
}
        
    

In this example, the :hover pseudo-class targets <a> elements when the mouse pointer hovers over them. It changes the text color of the link to red.

:active Pseudo-class

        
            button:active {
    background-color: yellow;
}
        
    

Here, the :active pseudo-class targets <button> elements when they are being activated, such as when they are being clicked or pressed. It sets the background color of the button to yellow.

:focus Pseudo-class

        
            input:focus {
    border-color: blue;
}
        
    

In this example, the :focus pseudo-class targets <input> elements that have received focus, typically by clicking or tabbing into them. It changes the border color of the focused input to blue.

:first-child Pseudo-class

        
            ul li:first-child {
    font-weight: bold;
}
        
    

Here, the :first-child pseudo-class targets the first <li> element that is a child of a <ul> element. It sets the font weight of the first list item to bold.

:nth-child() Pseudo-class

        
            tr:nth-child(even) {
   background-color: lightgray;
}
        
    

In this example, the :nth-child(even) pseudo-class targets even-numbered <tr> elements within a table. It applies a light gray background color to those table rows.