Previous chapter (Advanced CSS - Display)

CSS Pseudo

CSS pseudo-classes are used to add special effects to some selectors.

Other examples in Pseudo (Advanced CSS)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <style type="text/css">
        a:link
        {
            color: #060;
        }
        /* unvisited link */
        a:visited
        {
            color: #0CC;
        }
        /* visited link */
        a:hover
        {
            color: #C60;
        }
        /* mouse over link */
        a:active
        {
            color: #F6F;
        }
        /* selected link */
        p:first-child
        {
            color: #F00;
            font-size: 24px;
            font-family: "Lucida Console" , Monaco, monospace;
        }
        p > i:first-child
        {
            color: #93C;
            font-family: "Palatino Linotype" , "Book Antiqua" , Palatino, serif;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>
        CSS pseudo code is used for making effects on html elements
    </p>
    <p>
        pseudo syntax is <b>selector:pseudo-class {property:value;} </b>
    </p>
    <a href="#" onclick="return false;">
        <h1>
            click here
        </h1>
    </a>
    <p>
        This is first child of the body
    </p>
    <p>
        This is second child
    </p>
    <div style="background-color: #969">
        <p>
            This is first child of the div
        </p>
        <p>
            This is second child of the div
        </p>
    </div>
    <p>
        First &lt;i&gt; tag inside this paragraph will have . <i>a fancy text</i> that is
        triggered by :first child. <i>There is no effect on second &lt;i&gt;.</i>
    </p>
</body>
</html>

^4.0

^4.0

^3.0

^7.0

^9.5

CSS Pseudo

Useful Information