CSS pseudo-classes are used to add special effects to some CSS selectors.
Below is the syntax for writing pseudo-classes:
selector:pseudo-class { property:value; }
Class selectors can also be used with pseudo-classes:
selector.class:pseudo-class { property:value; }
Anchor pseudo-classes[]
Anchor 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 */ }
a:hover
must come after a:link
and a:visited
in the CSS definition in order to be effective and 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 class selectors[]
Pseudo-classes can be combined with CSS classes:
a.red:visited { color:#FF0000; }
<a class="red" href="css_syntax.asp">Red link if it has been visited.</a>
:first-child[]
The :first-child
pseudo-class matches a specified element that is the first child of another element. For it to work in IE a <!DOCTYPE>
must be declared.
In the following example, the selector matches any <p>
element that is the first child of any element:
p:first-child { color:blue; }
<p>I am a strong man.</p> <p>I am a strong man.</p>
In the following example, the selector matches the first <i>
element in all <p>
elements:
p > i:first-child { font-weight:bold; }
<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>
In the following example, the selector matches all <i>
elements in <p>
elements that are the first child of another element:
p:first-child i { color:blue; }
<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>
:lang[]
The :lang
pseudo-class allows you to define special rules for different languages. 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"
:
q:lang(no) { quotes: "~" "~"; }
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
:focus[]
The :focus
pseudo-class allows you to add a special style to an element that has keyboard input focus, such as the color of an input field that gets focused. Internet Explorer 8 (and higher) supports the :focus
pseudo-class if a <!DOCTYPE>
is specified.
In the example below, the :focus
class defines a background color for the input box that is currently selected:
input:focus { background-color:yellow; }
<form action="form_action.asp" method="get"> First name: <input type="text" name="fname" /> <br /> Last name: <input type="text" name="lname" /> <br /> <input type="submit" value="Submit" /> </form>
Pseudo-classes[]
Below is a chart that lists the pseudo-classes along with a brief description:
Pseudo-class | Description |
---|---|
:active |
Adds a style to an element that is activated. |
:first-child |
Adds a style to an element that is the first child of another element. |
:focus |
Adds a style to an element that has keyboard input focus. |
:hover |
Adds a style to an element when you mouse over it. |
:lang |
Adds a style to an element with a specific lang attribute. |
:link |
Adds a style to an unvisited link. |
:visited |
Adds a style to a visited link. |