CSS Pseudo-classes

The CSS pseudo-class is mainly used to add a special state to the selector.You can use the CSS pseudo-class (without JavaScript) to implement some simple effects for HTML elements, such as hover animations.

Syntax

A simple syntax of pseudo-classes is as follows:

selector:pseudo-class {
    property: value;
}

CSS classes can also use pseudo-classes:

selector.class:pseudo-class {
    property: value;
}

The Anchor Pseudo-class

In the CSS Links chapter, you have learned that there are four states of the <a> element: link, visited, hover, and active.The style of these four states is defined by CSS pseudo-classes, for example:

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Note: a:hover must be placed after a:link, a:visited and a:active must be placed after a:hover. The name of the pseudo-class is case-insensitive.

If you want to define several different sets of link effects in a page, you can use CSS classes and CSS pseudo-classes at the same time.For example, we can define a set of links whose initial colors are red and turn blue after be visited. At the same time, we define another set of links whose initial colors are green and turn yellow after be visited:

a.red:link {
    color: #FF0000;
}
a.red:visited {
    color: #0000FF;
}
a.blue:link {
    color: #00FF00;
}
a.blue:visited {
    color: #FF00FF;
}
<a class="red" href="#">this is first set of links</a>
<a class="blue" href="#">this is another set of links</a>

The :first-child Pseudo-class

The :first-child pseudo-class represents the first child of the parent element.

Example 1: Set the text color of the first <li> element to orange.

li:first-child {
    color: orange;
}
<ul>
    <li>This text will be orange.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

Example 2: Set the first <span> element in each <li> element to be orange and italic.

li > span:first-child {
    color: orange;
    font-style: italic;
}
<ul>
    <li>This <span>text</span> will be orange.</li>
    <li><span>Lorem</span> ipsum dolor <span>sit</span> amet.</li>
    <li>Lorem <span>ipsum</span> dolor sit amet.</li>
</ul>

Example 3: Set all <span> elements in the first <li> element to be orange and italic.

li:first-child span {
    color: orange;
    font-style: italic;
}
<ul>
    <li>This <span>text</span> will be <span>orange</span>.</li>
    <li>Lorem ipsum dolor <span>sit</span> amet.</li>
    <li>Lorem <span>ipsum</span> dolor sit amet.</li>
</ul>

Note: You must declare the <!DOCTYPE> statement in browsers prior to IE8 so that :first-child can take effect.

The :first-of-type Pseudo-class

The :first-of-type pseudo-class represents the first element of all element types in the parent container.

In the following example, the text color of the first <li> element and the first <span> element will be orange.

ul:first-of-type {
    color: orange;
}
<ul>
    <li>This tex will be orange.</li>
    <li>Lorem ipsum dolor <span>sit</span> amet.<span>This tex will be orange.</span></li>
    <li>Lorem <span>ipsum</span> dolor sit amet.</li>
</ul>

The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

In the example below, :lang defines the quotation marks for <q> elements with lang=”no”:

<html>
<head>
<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

The :nth-child Pseudo-class

The :nth-child pseudo-class is one of the most flexible pseudo-classes in CSS. All of the :nth pseudo-classes have one parameter who has three types:

  • The Integer
  • The Formula an+b (both a and b are integers)
  • The odd or even keyword

Here we have a list of Greek words:

<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

Example 1: Set the color of second word “Beta” to orange.

ol :nth-child(2) {
    color: orange;
}

Example 2: Set the colors of the 2nd, 4th, 6th, 8th … words to orange.

ol :nth-child(2n) {
    color: orange;
}

Example 3: Set the colors of even-numbered words to orange.

ol :nth-child(even) {
    color: orange;
}

Example 4: Starting with the 6th child element, set the colors of the 6th, 8th, 10th, and 12th… words to orange.

ol :nth-child(2n+6) {
    color: orange;
}

The List Of All CSS Pseudo-classes

The following is a complete list of CSS pseudo-classes. You can click on the links to learn the usage of each CSS pseudo-class.(from w3schools)

SelectorExampleExample description
:activea:activeSelects the active link
:checkedinput:checkedSelects every checked <input> element
:disabledinput:disabledSelects every disabled <input> element
:emptyp:emptySelects every <p> element that has no children
:enabledinput:enabledSelects every enabled <input> element
:first-childp:first-childSelects every <p> elements that is the first child of its parent
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent
:focusinput:focusSelects the <input> element that has focus
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects <input> elements with a value within a specified range
:invalidinput:invalidSelects all <input> elements with an invalid value
:lang(language)p:lang(it)Selects every <p> element with a lang attribute value starting with “it”
:last-childp:last-childSelects every <p> elements that is the last child of its parent
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent
:linka:linkSelects all unvisited links
:not(selector):not(p)Selects every element that is not a <p> element
:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent
:nth-last-child(n)p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent
:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent
:only-childp:only-childSelects every <p> element that is the only child of its parent
:optionalinput:optionalSelects <input> elements with no “required” attribute
:out-of-rangeinput:out-of-rangeSelects <input> elements with a value outside a specified range
:read-onlyinput:read-onlySelects <input> elements with a “readonly” attribute specified
:read-writeinput:read-writeSelects <input> elements with no “readonly” attribute
:requiredinput:requiredSelects <input> elements with a “required” attribute specified
:rootrootSelects the document’s root element
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
:validinput:validSelects all <input> elements with a valid value
:visiteda:visitedSelects all visited links

Leave a Comment

Your email address will not be published.