Improve your website with a Premium WordPress Theme and Design it in Real Time.
search
HTML CSS JavaScript Appendix
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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

a, area

: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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

a, area

: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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

a

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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

a, abbr, acronym, address, area, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, fieldSet, font, form, H1, H2, H3, H4, H5, H6, html, i, input:button, input:file, input:password, input:reset, input:search, input:submit, input:text, ins, isIndex, kbd, label, legend, li, listing, marquee, menu, nobr, ol, p, plainText, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tt, u, ul, var, xmp

: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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

a, abbr, acronym, address, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, fieldSet, font, form, H1, H2, H3, H4, H5, H6, html, i, input:button, input:file, input:password, input:reset, input:search, input:submit, input:text, ins, isIndex, kbd, label, legend, li, listing, marquee, menu, nobr, ol, p, plainText, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tt, u, ul, var, xmp

: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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

a, abbr, acronym, address, area, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, fieldSet, font, form, H1, H2, H3, H4, H5, H6, html, i, input:button, input:file, input:password, input:reset, input:search, input:submit, input:text, ins, isIndex, kbd, label, legend, li, listing, marquee, menu, nobr, ol, p, plainText, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tt, u, ul, var, xmp

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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

button, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, optGroup, option, select, textArea

: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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

button, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, optGroup, option, select, textArea

: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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

input:checkbox, input:radio

: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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

input:checkbox

: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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

input:submit

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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

a, abbr, acronym, address, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, fieldSet, font, form, H1, H2, H3, H4, H5, H6, html, i, input:button, input:file, input:password, input:reset, input:search, input:submit, input:text, ins, isIndex, kbd, label, legend, li, listing, marquee, menu, nobr, ol, p, plainText, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tt, u, ul, var, xmp

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>
Copy Code Print Preview Syntax Highlighter
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>
Copy Code Print Preview Syntax Highlighter
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>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Supported by tags:

a, abbr, acronym, address, applet, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, embed, fieldSet, font, form, H1, H2, H3, H4, H5, H6, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isIndex, kbd, label, legend, li, listing, marquee, menu, nobr, object, ol, p, plainText, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tBody, td, textArea, tFoot, th, tHead, tt, u, ul, var, xmp
User Contributed Comments

Post Content

Post Content
Search: search
© 2012 Dottoro.com. All rights reserved.