CSS Pseudo-Classes
CSS pseudo-classes are used to add special effects for some selectors.
Grammar
Syntax of pseudo-classes:
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 link */
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* mouse over the link */
a:active {color:#0000FF;} /* selected link */Note: In the CSS definition, a:hover must be placed after a:link and a:visited to be effective.
Note: In the CSS definition, a:active must be placed after a:hover to be effective.
Note: The names of pseudo-classes are not case sensitive.
Pseudo-classes and CSS classes
Pseudo-classes can be used in conjunction with CSS classes:
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS syntax</a>If the link in the example above has been visited, it will be displayed in red.
CSS :first-child pseudo-class
You can use the :first-child pseudo-class to select the first child element of the parent element.
Note: <!DOCTYPE> must be declared in the previous version of IE8 , so that: first-child can take effect.
Match The First <p> Element
In the following example, the selector matches the <p> element that is the first child element of any element:
Example
p:first-child
{
color:blue;
}Match The First <i> Element in All <p> Elements
In the following example, the first <i> element of all matched <p> elements is selected:
Example
p > i:first-child
{
color:blue;
}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 element of the element:
Example
p:first-child i
{
color:blue;
}CSS - :lang pseudo-class
The :lang pseudo-class gives you the ability to define special rules for different languages
Note: IE8 must declare <!DOCTYPE> to support the ;lang pseudo-class.
In the following example, the :lang class defines the type of quotation marks for the q element whose attribute value is no:
Example
q:lang(no) {quotes: "~" "~";}
More Examples
Adding different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Use: focus
This example demonstrates how to use the :focus pseudo-class.
CSS pseudo-classes / elements
| Selector | Example | Description |
|---|---|---|
| :checked | input:checked | Select all selected form elements |
| :disabled | input:disabled | Select all disabled form elements |
| :empty | p:empty | Select all p elements that have no child elements |
| :enabled | input:enabled | Select all enabled form elements |
| :first-of-type | p:first-of-type | Each p element selected is the first p element of its parent element |
| :in-range | input:in-range | Select the value in the specified range of the element |
| :invalid | input:invalid | Select all invalid elements |
| :last-child | p:last-child | Select the last child element of all p elements |
| :last-of-type | p:last-of-type | Select each p element to be the last p element of its parent element |
| :not(selector) | :not(p) | Select all elements other than p |
| :nth-child(n) | p:nth-child(2) | Select the second child element of the parent element of all p elements |
| :nth-last-child(n) | p:nth-last-child(2) | Select the second child element from the bottom of all p elements |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Select the second child element of p from the bottom of all p elements |
| :nth-of-type(n) | p:nth-of-type(2) | Select all p elements and the second child element of p |
| :only-of-type | p:only-of-type | Select all elements with only one child element as p |
| :only-child | p:only-child | Select all p elements that have only one child element |
| :optional | input:optional | Select element attributes without "required" |
| :out-of-range | input:out-of-range | Select element attributes with values outside the specified range |
| :read-only | input:read-only | Select element attributes of read-only attributes |
| :read-write | input:read-write | Select element attributes without read-only attributes |
| :required | input:required | Select the element attribute specified by the "required" attribute |
| :root | root | Select the root element of the document |
| :target | #news:target | Select the currently active #news element (click on the URL to include the name of the anchor) |
| :valid | input:valid | Select all attributes with valid values |
| :link | a:link | Select all unvisited links |
| :visited | a:visited | Select all visited links |
| :active | a:active | Select the active link |
| :hover | a:hover | The state of putting the mouse on the link |
| :focus | input:focus | Select element to have focus after input |
| :first-letter | p:first-letter | Select the first letter of each <p> element |
| :first-line | p:first-line | Select the first line of each <p> element |
| :first-child | p:first-child | The selector matches the <p> element belonging to the first child element of any element |
| :before | p:before | Insert content before each <p> element |
| :after | p:after | Insert content after each <p> element |
| :lang(language) | p:lang(it) | Choose a starting value for the lang attribute of the <p> element |