CSS TUTORIALS - CSS - Pseudo Classes
CSS - Pseudo Classes
ADVERTISEMENTS
selector:pseudo-class {property: value}
|
ADVERTISEMENTS
selector.class:pseudo-class {property: value}
|
ADVERTISEMENTS
| 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. |
<style type="text/css">
a:link {color:#000000}
</style>
<a href="/html/index.htm">Black Link</a>
|
<style type="text/css">
a:visited {color: #006600}
</style>
<a href="/html/index.htm">Click this link</a>
|
<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>
|
<style type="text/css">
a:active {color: #FF00CC}
</style>
<a href="/html/index.htm">Click This Link</a>
|
<style type="text/css">
a:focus {color: #0000FF}
</style>
<a href="/html/index.htm">Click this Link</a>
|
<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>
|
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.
|
<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>
|
|
...A quote in a paragraph ...
|
