Home >> css >> CSS Pseudo- classes

CSS Pseudo- classes

The CSS pseudo-class selector matches components on the basis of an additional condition and is not necessarily specified by the document tree.

What is Pseudo-class

The pseudo-classes enable you to style an element's dynamic states like active, hover, and focus state and the elements that already exist in the document tree but can't be targeted by using other selectors without adding any classes or IDs to them—for example, targeting the first child or last child elements.

A pseudo-class begins with a colon (:). You can give its syntax with:

selector:pseudo-class { property: value; }

Anchor Pseudo-classes

You can use anchor pseudo-classes to display links in different ways:

You can use these pseudo-classes to style unvisited links in a different way from visited ones. The commonly used styling technique is to remove underlines from visited links..

Example :

a:link {
    color: blue;
}
a:visited {
    text-decoration: none;
}

Try With Example

A few anchor pseudo-classes are dynamic and applied as a result of the user's interaction with the document, such as on focus, hover, etc.

Example :

a:hover {
    color: red;
}
a:active {
    color: gray;
}
a:focus {
    color: yellow;
}

Try With Example

These pseudo-classes change how the links are generated in response to user actions.

:hover It is applied when a user places a cursor or mouse over the element but does not select the element.
:active It is used when an element is activated or clicked.
:focus It is applied when the element has keyboard focus.

Note: For making these pseudo-classes work flawlessly, these must be defined in precisely this order — :link, :visited, :hover, :active, :focus.

The :first-child Pseudo-class

It matches an element which is the first child element of another element. So, in the example below, the selector ol li:first-child will select the first list item of an ordered list and will remove the top border from it.

Example :

ol li:first-child {
    border-top: none;
    background-color:#48CEAD;
}

Try With Example

Note: You must declare a <!DOCTYPE> at the document's top to make :first-child to work in Internet Explorer 8 and earlier versions.

The :last-child Pseudo-class

It matches an element which is the last child element of another element. So, in the example below, the selector ul li:last-child will select the last list item from an unordered list and will remove the right border from it.

Example :

ul li:last-child { border-right: none; }

Try With Example

Note: The CSS :last-child pseudo-class selector does not work in Internet Explorer 8 and earlier versions. It is supported in Internet Explorer 9 and above.

The :nth-child Pseudo-class

The CSS3 introduces A new :nth-child pseudo-class has been introduced by CSS3 that enables you to target a given parent element's one or more specific children. You can provide the basic syntax of this selector with :nth-child(N), where N is an argument, it can be a keyword (even or odd), a number, or an expression in the form xn+y, in which x and y are integers (e.g., 2n, 1n, 2n+1, …).

Example :

table tr:nth-child(2n) td {
    background: #f2f2f2;
}

Try With Example

In the example mentioned above, the style rules simply highlight the alternate table row without adding any classes or IDs to the <table> elements.

Tip: The CSS :nth-child(N) pseudo-class selector is helpful when selecting the elements that appear inside the document tree in a specific pattern or interval like at odd or even places, etc.

The :lang Pseudo-class

The language pseudo-class :lang lets you construct selectors on the basis of the language setting for specific tags. In the example below, the :lang pseudo-class defines the quotation marks for <q> elements explicitly given a language value of no.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS :lang Pseudo-class</title>
<style>
    q:lang(no) {
        quotes:"~" "~";
    }
</style>
</head>
<body>
    <p>Remember <q lang="no">When you have a dream, you've got to grab it and never let go</q> by Carol Burnett</p>
    <p><strong>Note:</strong> Internet Explorer 8 and earlier version don't support the <code>:lang</code> pseudo-class. IE8 supports only if a DOCTYPE is specified.</p>
</body>
</html>

Try With Example

Note: The :lang pseudo-class is not supported by Internet Explorer up to version 7. Internet Explorer 8 supports it only if a <!DOCTYPE> is specified.

Pseudo-classes and CSS Classes

You can combine pseudo-classes with CSS classes.

The link with class="red" will be displayed in red in the example below.

Example :

a.red:link {    /* style rule */
    color: #ff0000;
}
<a class="red" href="#">Click me</a>    /* HTML code snippet */

Try With Example

-Advertisement-