Home > DeveloperSection > Blogs > CSS Pseudo-Class

CSS Pseudo-Class


CSS-CSS3 HTML5  CSS Selector 
Ratings:
0 Comment(s)
 1259  View(s)
Rate this:

CSS Pseudo-Class

Hi everyone in this blog, I’m explaining about Pseudo class.

Description:

A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic — they’re applied as a result of user interaction with the document.

CSS pseudo-classes are used to add special effects to some selectors. You do not need to use Javascript or any other script to use those effects. A simple syntax of pseudo-classes is as follows:

A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

CSS1 introduced the :link, :visited, and :active pseudo-classes, but only for the HTML a element. These pseudo-classes represented the state of links—unvisited, visited, or currently being selected—in a web page document. In CSS1, all three pseudo-classes were mutually exclusive.

CSS2 expanded the range of pseudo-classes and ensured that they could be applied to any element. :link and :visited now apply to any element defined as a link in the document language. While they remain mutually exclusive, the :active pseudo-class now joins :hover and :focus in the group of dynamic pseudo-classes. The :hover pseudo-class matches elements that are being designated by a pointing device (for example, elements that the user’s hovering the cursor over); :active matches any element that’s being activated by the user; and :focus matches any element that is currently in focus (that is, accepting input).

CSS2 also introduced the :lang pseudo-class to allow an element to be matched on the basis of its language, and the :first-child pseudo-class to match an element that’s the first child element of its parent.

Anchor Pseudo-Class list:

1.       A:link{}: Unvisited link

2.       A:hover{}: Mouse over link

3.       A:visited{}: visited link

4.       A:active{}: Selective link

HTML Code:

<div class="menu">

    <ul>

        <li>

            <a href="#">HOME</a></li>

        <li>

            <a href="#">NEWS</a></li>

        <li>

            <a href="#">ARTICLE</a></li>

        <li>

            <a href="#">BLOGS</a></li>

        <li>

            <a href="#">ABOUT</a></li>

    </ul>

</div>

 

CSS:

.menu {

        width:70%;

        margin:0 auto;

        background-color:#bcd006;

        height:50px;

    }

    .menu ul li{

        padding:10px;

        list-style:none;

        display:inline-block;

        width:17%;

    }

 

Output:

 

Use Pseudo-Class a:hover{}:

Following is the example which demonstrates how use :hover class to change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format.

The color of the text changes when you hover the mouse over the link.

A:hover {

        color:#fff;

    }

 

Output:

Use Pseudo-Class a:link{}:

Following is the example which demonstrates how to use :link class to set the link color. Possible value could be any color name in any valid format.

A:link {

        text-decoration:none;

    }

 

Output:

 

Use Pseudo-Class a:visited{}:

Following is the example which demonstrates how to use :visited class to set the color of visited links. Possible value could be any color name in any valid format.

A:visited {

        color:#f00;

    }

 

Output:

 

Use Pseudo-Class a:active{}:

Following is the example which demonstrates how to use :active class to change the color of active links. Possible value could be any color name in any valid format.

A:active {

        color:#fff;

        background-color:#808080;

    }

 

Output:

 

 in my next post i'll explain about Error handling in CSS


Don't want to miss updates? Please click the below button!

Follow MindStick