Pseudo Classes

A pseudo-class is used to define a special state of an element.

Selector: Pseudoclasses { 
    … 
}

:hover

When the mouse is placed on an element, this class suspicion is activated.

a:hover {
    color: red;
}
Hover Me

:link

Used to select and style unvisited links.

a:link {
    color: aqua;
}

:visited

Used to Select and style visited links.

a:visited {
    color: red;
}

:active

Used to select and style the active link.

a:active {
    color: blue;
}

:nth-child

The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.

/* Select the 3th list item */
li: nth-child(3) { }
/* Select every other list item starting with first */
li: nth-child(odd) { }
/* Select every 3rd list item starting with first */
li: nth-child (3n - 2) { }
/* Select every 3rd child item, as long as it has class "el" */
.el: nth-child(3n) { }

:first child

Used to Select and style every first child of parent.

li:first-child {
    background: yellow;
}

:last child

Used to Select and style every last child of parent.

li:last-child {
    background: red;
}

:Not()

This selector represents elements that do not match a list of selectors. Set a color for all elements that are not a <ul> element:

:not(ul) {
    color: #ff0000;
}

:Lang()

The :lang() pseudo-class selector in CSS matches elements based on the context of their given language attribute. Set background for any <p> element with lang="en" attribute.

p:lang(en) {
    color: yellow;
}

:focus

This CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.

input:focus {
    background-color: green;
}

:first-letter

It is a pseudo-element that selects the first letter in the first line of a block-level element (such as a paragraph <p>), if that letter is not preceded by any other content (such as images or inline tables) on its line.

p:first-letter {
    font-size: 24px;
}

:after

The CSS :after selector allows you to add content after a selected element. (use in css3).

p:after {
    content: "end";
}

This is paragraph1.

:before

The CSS :before selector allows you to add content before a selected element. (use in css3)

p:before {
    content: "Start";
}

This is paragraph1.

Here is paragraph2.

::after and ::before

These are like :after and :before but these work in CSS version 2.