CSS Pseudo-classes
CSS pseudo-classes are used to add special effects to some selectors.
Examples
Hyperlink
This example demonstrates how to add different colors to a hyperlink in a document.
Hyperlink 2
This example demonstrates how to add other styles to hyperlinks.
Use of :focus (does not work in IE)
This example demonstrates how to use the :focus pseudo-class.
:first-child - change first child <p>
This example sets any <p> element that is the first child of any element to blue.
:first-child - change first child <i> in all <p> elements
This example sets the first <i> element in all <p> elements to blue.
:first-child - change all <i> elements in first child <p>
This example sets any <i> elements in first child <p> elements to blue.
:lang (does not work in IE)
This example demonstrates the use of the :lang pseudo-class.
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:
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 */ |
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>
|
|
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>
|
|
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> |
|
CSS - The :lang Pseudo-class
The :lang pseudo-class allows you to define special rules for different languages.
In the example below, the :lang class defines the quotation marks for q
elements with lang="no":
<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> |
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 |
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 3500 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).
| 
