You are here: Reference > CSS > selectors and pseudos > special pseudo classes

Special Pseudo-Classes

Pseudos:

Pseudo Support Description
Link pseudo-classes
:link
Applies to unvisited links ('A' tag with specified href attribute).
:visited
Applies to visited links ('A' tag with specified 'href' attribute, that has been visited by the user before).
:target
9
Applies to the element which is the target of the current document's URI.
Dynamic pseudo-classes
:active
Applies to the currently engaged or active element within the document.
:focus
8
Applies to the element that currently has the focus.
:hover
Applies to the element that the mouse pointer is currently over.
State pseudo-classes
:enabled
9
Applies to standard user interface elements that are enabled to be used by the user.
:disabled
9
Applies to standard user interface elements that are disabled.
:checked
9
Applies to an element that is in checked state.
:indeterminate
93.6
Applies to an element that is in indeterminate state.
:default
3
Applies to default user interface elements.
Language pseudo-class
:lang
8
Applies to elements with the specified language setting.
Negation pseudo-class
:not()
9
Used to negate a normal selector.

Link pseudo-classes:

:link

Applies to unvisited links ('A' tag with specified href attribute).
<head>
    <style>
        a:link { color: red; }
        a:visited { color: black; }
        a:active { color: green; }
        a:link:hover {
            background-color: #f3f2e7;
            color:#8a4500;
        }
    </style>
</head>
<body>
    Click on the following hyperlinks to see the default, normal and visited states:
    <br /><br />
    <a href="#first">Hyperlink text</a>
    <br /><br />
    <a href="#second">Hyperlink text</a>
    <br /><br />
    <a href="#third">Hyperlink text</a>
</body>
Did you find this example helpful? yes no

Supported by tags:

:visited

Applies to visited links ('A' tag with specified 'href' attribute, that has been visited by the user before).
<head>
    <style>
        a:link { color: red; }
        a:visited { color: black; }
        a:active { color: green; }
        a:link:hover {
            background-color: #f3f2e7;
            color:#8a4500;
        }
    </style>
</head>
<body>
    Click on the following hyperlinks to see the default, normal and visited states:
    <br /><br />
    <a href="#first">Hyperlink text</a>
    <br /><br />
    <a href="#second">Hyperlink text</a>
    <br /><br />
    <a href="#third">Hyperlink text</a>
</body>
Did you find this example helpful? yes no

Supported by tags:

:target

9
Applies to the element which is the target of the current document's URI. In other words, if the current document's URI ends with a fragment identifier (#something), the :target pseudo sets style rules for the a element with name attribute of 'something'.
<head>
    <style>
        a:link {
            color:green;
            font-size: large;
        }
        a:link:hover {
            background-color: #f3f2e7;
            color:#8a4500;
        }
        a:target {
            color:red;
        }
    </style>
</head>
<body>
    <a href="#linktarget">Click to Jump</a>
    <br />
    <a name="linktarget">Jump here</a>
</body>
Did you find this example helpful? yes no

Supported by tags:

Dynamic pseudo-classes:

:active

Applies to the currently engaged or active element within the document. The active pseudo class works differently in different browsers, in Internet Explorer earlier than version 8 it affects link elements only, in Firefox, Opera, Safari, Google Chrome and in Internet Explorer from version 8 it affects all elements that can have focus (input, button, a,...).
<head>
    <style>
        a:active {
            color:red;
        }
    </style>
</head>
<body>
    <a href="#linktarget">Click to activate</a>
    <br />
    <a name="linktarget">the target link</a>
</body>
Did you find this example helpful? yes no

Supported by tags:

:focus

8
Applies to the element that currently has the focus. Typically the 'a' (anchor) and form elements can have focus.
Note: The :focus pseudo is supported in Internet Explorer from version 8.
<head>
    <style>
        input:focus {
            color:red;
            width: 200px;
        }
    </style>
</head>
<body>
    <input type="text" value="first input" />
    <input type="text" value="second input" />
</body>
Did you find this example helpful? yes no

Supported by tags:

:hover

Applies to the element that the mouse pointer is currently over.
<head>
    <style>
        b:hover {
            color:red;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <b>Move</b> <b>the</b> <b>mouse</b> <b>over</b> <b>this</b> <b>text</b>
</body>
Did you find this example helpful? yes no

Supported by tags:

State pseudo-classes:

:enabled

9
Applies to standard user interface elements that are enabled to be used by the user. (For example, a button)
<head>
    <style>
        button:enabled {
            color:red;
        }
        button:disabled {
            color:yellow;
        }
    </style>
</head>
<body>
    <button>Enabled button</button>
    <button disabled="disabled">Disabled button</button>
</body>
Did you find this example helpful? yes no

Supported by tags:

:disabled

9
Applies to standard user interface elements that are disabled.
<head>
    <style>
        button:enabled {
            color:red;
        }
        button:disabled {
            color:yellow;
        }
    </style>
</head>
<body>
    <button>Enabled button</button>
    <button disabled="disabled">Disabled button</button>
</body>
Did you find this example helpful? yes no

Supported by tags:

:checked

9
Applies to an element which is in checked state.
<head>
    <style>
        input:checked {
            outline: 3px solid red;
        }
    </style>
</head>
<body>
    <input name="radios" type="radio" />
    <input name="radios" type="radio" checked="checked" />
</body>
Did you find this example helpful? yes no

Supported by tags:

:indeterminate

93.6
Applies to an element which is in indeterminate state.
Note: The :indeterminate pseudo is supported in Firefox from version 3.6.
<head>
    <style>
        #indetBox:indeterminate {
            outline: 3px solid red;
        }
    </style>
    <script type="text/javascript">
        function Init () {
            var indetBox = document.getElementById ("indetBox");
            if (indetBox.indeterminate === undefined) {
                alert ("Your browser does not support this example!");
            }
            else {
                indetBox.indeterminate = true;
            }
        }
    </script>
</head>
<body onload="Init ()">
    <input type="checkbox" id="indetBox" /> 
    <input type="checkbox"  /> 
</body>
Did you find this example helpful? yes no

Supported by tags:

:default

3
Applies to default user interface elements.
Note: The :default pseudo is supported in Firefox from version 3.

For example a submit button is a default user interface element on a form, when the user presses enter while editing the form, the default button is pressed. If more than one submit button is placed on a form, only the first submit button is the default button.
<head>
    <style>
        :default  {  
            color:red;
        }
    </style>
</head>
<body>
    <form method="post" action="#URL#">
        Username: <input type="text" name="userName" />
        <br />
        Password: <input type="password" name="password" />
        <br /><br />
        <input type="reset" value="Reset to initial state" />
        <br />
        <input type="submit" value="Sign in" />
        <br />
        <input type="submit" value="Register" />
    </form>
</body>
Did you find this example helpful? yes no

Supported by tags:

Language pseudo-class:

:lang(code)

8
Applies to elements with the specified language setting. The code parameter must contain a specific language code that identifies the language that the rules applies to.
Note: The :lang pseudo is supported in Internet Explorer from version 8.
<head>
    <style>
        span:lang(en) {
            background-color:red;
        }
    </style>
</head>
<body>
    <span lang="en">english</span> 
    <span lang="de">german</span> 
    <span lang="en">english again</span> 
</body>
Did you find this example helpful? yes no

Supported by tags:

Negation pseudo-class:

:not(selector)

9
Used to negate a normal selector.
Available values of selector :
tag selector A specific tag name, such as "'span', 'div' ... . This selects all elements except the given elements.
class selector A single class name or a comma-separated list of class names. This selects all elements that do not have the given class or classes.
property value pair selector Property with the given value, for example [type="text"]. This selects all elements that do not have the given property value pair.
This selects all div elements that do not have the class .red.
<head>
    <style>
        div:not(.red) {
            color:green;
        }
        .red {
            color:red;
        }
    </style>
</head>
<body>
    <div>
        Not red div (must be green).
    </div>
    <div class="red">
        A red div.
    </div>
</body>
Did you find this example helpful? yes no
This selects all elements that have the class .red, except the p elements:
<head>
    <style>
        .red:not(p) {
            color:red
        }
    </style>
</head>
<body>
    <div class="red">
        Not p element.
    </div>
    <p class="red">p element.</p>
</body>
Did you find this example helpful? yes no
This selects all div elements that do not have the name="text" property value pair:
<head>
    <style>
        div:not([name="text"]) {
            color:red;
        }
    </style>
</head>
<body>
    <div name="text">
        Division with name="text"
    </div>
    <div>
        Division without name="text"
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

User Contributed Comments

Post Content

Post Content