Pseudo Classes in CSS

Posted By : Vikas Pundir | 23-Apr-2018

css

Pseudo-class
To define a special state of an element we used pseudo-class. Using CSS pseudo-classes allow you can apply style on dynamic states of an element and without defined any IDs or classes you can target an element. For example, you can be targeting the last child or first child elements. With CSS classes we can combine Pseudo-classes.

With a colon (:) a pseudo-class starts. The syntax of pseudo-class can be given with:

selector:pseudo-class { property: value; }

How to use pseudo-classes we describe most commonly used pseudo-classes in this section.

Anchor Pseudo-classes:
Links can be displayed in different ways using anchor pseudo-classes:

Using these pseudo-classes let you style visited ones differently from unvisited links. To remove underlines from visited links we used the most common styling technique.

HTML:

<body>        
    <p>Visit <a href="https://abcd" target="_blank">www.abcd.com</a></p>
</body>

CSS:

a:link {
        color: blue;
    }
    a:visited {
        text-decoration: none;
    }

On hover, or on focus these are some dynamic anchor pseudo-classes, they're applied as a result of user interaction with the document.

HTML:

<body>        
    <p>Visit <a href="https://abcd" target="_blank">www.abcd.com</a></p>
</body>

CSS:

 a:link {
        color: blue;
    }
    a:visited {
        text-decoration: none;
    }
    a:hover {
        color: red;
    }
    a:active {
        color: gray;
    }
    a:focus {
        color: yellow;
    }

These pseudo-classes most commonly used on links in a website for the attractive design. change how the links are rendered in response to user actions.

Hover: This class applies when a user mouses over the element.
Active: This class applies when the element is clicked by a user or activated.
Focus: This class applies an element when it gets focus.

Pseudo-class :first-child
The Only first child element of some other element will be selected using: first-child pseudo-class. In the example selector ol li:first-child, only select the first list item and removes the right border it form an ordered list.

HTML:

<body>
    <h1>Sample Ordered Lists</h1>
    <ol>
        <li>Mix all ingredients</li>
        <li>Bake in oven for an hour or two hour</li>
        <li>Allow to stand for nine minutes</li>
    </ol>
</body>

CSS:

ol{
        padding: 0;
        list-style: none;          
    }
    ol li{
        padding: 10px 0;
        border-right: 1px solid #000000;
    }
    li:first-child {
        border-right: none;
    }

Pseudo-class :last-child
The Only last child element of some other element will be selected using: last-child pseudo-class. In the example selector ul li:last-child, only select the last list item from an unordered list and removes the right border it form an ordered list.

HTML:

<h1>Sample Navigation Bar</h1>
    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Services</li>
        <li>Contact Us</li>
    </ul>

CSS:

 ul{
        padding: 0;
        list-style: none;          
    }
    ul li{
        display: inline;
        padding: 0 20px;
        border-right: 1px solid #000000;
    }
    li:last-child {
        border-right: none;
    }

Pseudo-class :nth-child
The :nth-child pseudo-class introduces a new class in CSS3. Using this class one or more specific children target of a given parent element. The basic syntax is :nth-child(N) of this selector, Here N has defined an argument, and which can be a keyword (even or odd), a number, or an expression.

HTML:

<table>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Johnk</td>
            <td>Cartert</td>
            <td>johncarter@yahoo.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Petert</td>
            <td>Parkerr</td>
            <td>peterparker@yahoo.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Johnk</td>
            <td>Rambot</td>
            <td>johnrambo@yahoo.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Harryd</td>
            <td>Potterj</td>
            <td>harrypotter@yahoo.com</td>
        </tr>
    </table>

CSS:

table{
        margin: 30px;
        border-collapse: collapse;
    }
    table tr{
        border-bottom: 1px solid #666;
    }
    table tr th, table tr td{
        padding: 10px;
    }
    table tr:nth-child(2n) td{
        background: #f2f2f2;
    }

Without define, any classes or IDs to the <table> elements changed the background color style of the alternate table row using nth-child class.