Fandom

HTML & CSS Wiki

Pseudo-Classes

648pages on
this wiki
Add New Page
Comments0 Share

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-classesEdit

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 selectorsEdit

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-childEdit

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>

:langEdit

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>

:focusEdit

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-classesEdit

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.

See AlsoEdit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.