WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Pseudo-classes


CSS pseudo-classes are used to add some special effects to selectors.


Syntax

Syntax of pseudo-class:

selector:pseudo-class {property:value;}
CSS classes can also use pseudo-classes:
selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes

In browsers that support CSS, different states of links can be displayed in different ways

Example

a : link { color: # FF0000 ; } /* Unvisited links * / a : visited { color: # 00FF00 ; } /* Links visited * / a : hover { color: # FF00FF ; } /* Mouse over link * / a : active { color: # 0000FF ; } /* Selected links * /
Try it yourself »
Note: In the CSS definition, a: hover must be placed after a: link and a: visited to be valid.

Note: In the CSS definition, a: active must be placed after a: hover to be valid.

Note: The names of the pseudo-classes are not case sensitive.


Pseudo-classes and CSS classes

Pseudo-classes can be used with CSS classes:

Example

a.red:visited {color:#FF0000;} <a class="red" href="css-syntax.html">CSS Syntax</a>
Try it yourself »
If the link in the above example has been visited, it will be displayed in red.

Hover on <div>

An case of utilizing the :hover pseudo-class on a <div> element:

Example

div:hover {
    background-color: blue;
}
Try it yourself »

CSS: first-child pseudo-class

You can use the: first-child pseudo-class to select the first child element of the parent element.

note:Must be declared before IE8<!DOCTYPE> ,Then: first-child takes effect.

Match the first element <p>

In the following example, the selector matches the <p> element that is the first child of any element:

Example

p:first-child { color:blue; }
Try it yourself »

Match the first <i> celement of all <p>elements

In the following example, the first <i> element of all matching <p> elements is selected:

Example

p > i:first-child { color:blue; }
Try it yourself »

Match all <i> elements in all <p> elements that are the first child element

In the following example, the selector matches all <i> elements in all <p> elements that are the first child of the element:

Example

p:first-child i { color:blue; }
Try it yourself »

CSS - The :lang Pseudo-class

: lang pseudo-classes give you the ability to define special rules for different languages

In the following example, the: lang class defines the type of quotes for q elements with an attribute value of no:

Example

q:lang(no) {quotes: "~" "~";}
Try it yourself »