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:
selector:pseudo-class {property: value}
|
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property: value}
|
There are following most commonly used pseudo-classes:
| Value | Description |
|---|---|
| :link | Use this class to add special style to an unvisited link. |
| :visited | Use this class to add special style to a visited link. |
| :hover | Use this class to add special style to an element when you mouse over it. |
| :active | Use this class to add special style to an active element. |
| :focus | Use this class to add special style to an element while the element has focus. |
| :first-child | Use this class to add special style to an element that is the first child of some other element. |
| :lang | Use this class to specify a language to use in a specified element. |
While defining pseudo-classes in a <style>...</style> block, following points should be taken care:
- a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
- a:active MUST come after a:hover in the CSS definition in order to be effective.
- Pseudo-class names are not case-sensitive.
- Pseudo-class are different from CSS classes but they can be combined.
The :link pseudo-class
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.
<style type="text/css">
a:link {color:#000000}
</style>
<a href="/html/index.htm">Black Link</a>
|
This will produce following black link:
| Black Link |
To Become more comfortable - Do Online Practice
The :visited pseudo-class
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.
<style type="text/css">
a:visited {color: #006600}
</style>
<a href="/html/index.htm">Click this link</a>
|
This will produce following link. Once you will click this link, it will change its color to green.
| Click this link |
To Become more comfortable - Do Online Practice
The :hover pseudo-class
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.
<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>
|
This will produce following link. Now you bring your mouse over this link and you will see that it changes its color to yellow.
| Bring Mouse Here |
To Become more comfortable - Do Online Practice
The :active pseudo-class
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.
<style type="text/css">
a:active {color: #FF00CC}
</style>
<a href="/html/index.htm">Click This Link</a>
|
This will produce following link. This will change its color to pink when user clicks it.
| Click This Link |
To Become more comfortable - Do Online Practice
The :focus pseudo-class
Following is the example which demonstrates how to use :focus class to change the color of focused links. Possible value could be any color name in any valid format.
<style type="text/css">
a:focus {color: #0000FF}
</style>
<a href="/html/index.htm">Click this Link</a>
|
This will produce following link. This will change it color to orange when this link gets focused, then you focus on any other link to see that this color will change when it will lose focus.
| Click This Link |
To Become more comfortable - Do Online Practice
The :first-child pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element and adds special style to that element that is the first child of some other element.
To make :first-child work in IE <!DOCTYPE> must be declared at the top of document.
For example, to indent the first paragraph of all <div> elements, you could use this definition:
<style type="text/css">
div > p:first-child
{
text-indent: 25px;
}
</style>
<div> <p> First paragraph in div. This paragraph will be indented </p> <p> Second paragraph in div. This paragraph will not be indented </p> </div>
But it will not match the paragraph in this HTML:
<div> <h3>Heading</h3> <p> The first paragraph inside the div. This paragraph will not be effected. </p> </div> |
This will produce following result:
First paragraph in div. This paragraph will be indented
Second paragraph in div. This paragraph will not be indented
But it will not match the paragraph in this HTML:
Heading
The first paragraph inside the div.
This paragraph will not be effected. |
To Become more comfortable - Do Online Practice
The :lang pseudo-class
The language pseudo-class :lang allows constructing selectors based on the language setting for specific tags.
This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typically uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (' and ').
In a document that needs to address this difference, you can use the :lang pseudo-class to change the quote marks appropriately. The following code changes the <blockquote> tag appropriately for the language being used:
<style type="text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
<p>...<q lang="fr">A quote in a paragraph</q>...</p>
|
The :lang selectors will apply to all elements in the document. However, not all elements make use of the quotes property, so the effect will be transparent for most elements.
...
A quote in a paragraph... |