CSS Pseudo-classes
CSS pseudo-classes are used to add special effects to some selectors.
Syntax
The syntax of pseudo-classes:
| selector:pseudo-class {property:value;} |
CSS classes can also be used with pseudo-classes:
| selector.class:pseudo-class {property:value;} |
Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser:
Example
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */ |
Try it yourself »
|
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Note: Pseudo-class names are not case-sensitive.
Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
a.red:visited {color:#FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a> |
If the link in the example above has been visited, it will be displayed in red.
CSS - The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
Note: For :first-child to work in IE a <!DOCTYPE> must be declared.
Match the first <p> element
In the following example, the selector matches any <p> element that is the first child of any element:
Example
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
|
Try it yourself »
|
Match the first <i> element in all <p> elements
In the following example, the selector matches the first <i> element in all <p> elements:
Example
<html>
<head>
<style type="text/css">
p > i:first-child
{
font-weight:bold;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
|
Try it yourself »
|
Match all <i> elements in all first child <p> elements
In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
Example
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html> |
Try it yourself »
|
CSS - The :lang Pseudo-class
The :lang pseudo-class allows you to define special rules for different languages.
Note: Internet Explorer 8 (and higher) supports the :lang pseudo-class
if a <!DOCTYPE> is specified.
In the example below, the :lang class defines the quotation marks for q elements with lang="no":
Example
<html>
<head>
<style type="text/css">
q:lang(no)
{quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
|
Try it yourself »
|
 |
More Examples |
Add different
styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Use of :focus
This example demonstrates how to use the :focus pseudo-class.
Pseudo-classes
The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Pseudo name |
Description |
CSS |
| :active |
Adds a style to an element that is activated |
1 |
| :first-child |
Adds a style to an element that is the first child of
another element |
2 |
| :focus |
Adds a style to an element that has keyboard input focus |
2 |
| :hover |
Adds a style to an element when you mouse over it |
1 |
| :lang |
Adds a style to an element with a specific lang attribute |
2 |
| :link |
Adds a style to an unvisited link |
1 |
| :visited |
Adds a style to a visited link |
1 |
Start Creating a stunning, Flash website. It's easy and free!
Wix.com offers you a simple, powerful, drag & drop editing platform to create stunning Flash websites, layouts, and more.
With added e-commerce features such as search engine visibility and professional tools, Wix is the ultimate solution for creating a spectacular site.
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
