CSS2 Pseudo Selectors and pseudo classes Examples

:first-child

First child element

Definition

The :first-child selector is used to select the specified selector,only if it is the first child of its parent.

Example

Select and style every <p> element that is the first child of its parent :

p:first-child {

background-color: blue;

}

:first-line

First line of element

Definition

The : :first-line selector is used to add a style to the first line of the specified selector.

Example

Select and style the first line of every <p> element:

p:first-line {

background-color: pink;

}

:first-letter

First letter of element

Definition

The : :first-letter selector is used to add a style to the first letter of the specified selector.

Example

Select and style the first letter of every <p> element:

p: :first-letter {

font-size: 200%;

color: #8A2BE2;

}

:hover

Element with mouse over

Definition

The :hover selector is used to select elements when you mouse over them.

Tip: The :hover selector can be used on all elements, not only on links.

Example

Select and style a link when you mouse over it:

a:hover }

background-color: pink;

}

:active

Active element

Definition

The :active selector is used to select and style the active link.

A llink becomes active when you click on it.

Example

Select and style the active link:

a:active {

background-color: blue;

}

:focus

Element with focus

Definition

The :focus selector is used to select the element that has focus.

Example

Select and style an input field when it gets focus:

input: focus {

background-color: yellow;

}

:link

Unvisited links

Definition

The :link selector is used to select unvisited links.

Example

Select and style unvisited links:

a:link {

background-color: blue;

}

:visited

Visited links

Definition

The :visited selector is used to select visited links.

Example

Select and style visited links:

a:visited {

color: pink;

}

:lang(var)

Element with language “var”

Lang

Example

Select and style every <p> element with a lang attribute value equal to “it” (Italian):

p:lang(it) {

background: pink;

}

var()

The var() function is used to insert the value of a CSS variable.

A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and the same colors over and over again, you can place them in variables.

Example

body { background-color: #1e90ff;}
h2 { border-bottom: 2px solid #1e90ff;}

.container {

color: #1e90ff;
background-color: #fffff;
padding:15px;
}

button{
background-color: #fffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding:5px;
}


:before

Before element

Definition

The : :before selector inserts something before the content of each selected elements(s).

Example

Insert some text before the content of each <p> element:

P: :before {
    content: "Read this: ";
}

:after

After element

Definition

The : :after selector inserts something after the content of each selected element(s).

Example

Insert some text after the content of each <p> element:

p: :after {
    content: " - Remember this";
}

Leave a Reply

Your email address will not be published.