Pseudo-classes

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  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  element in all  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  elements in  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>

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.

Contents