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";
}
