|
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:
|
|
|
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:
|
|
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:
|
|
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:
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
|
|
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:
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
|
|
|
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:
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:
|
|
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:
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
|
|
|
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:
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
|
|
|
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:
|
|
|
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:
|
|
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:
|
|
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:
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:
|
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:
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
|
