CSS Pseudo Class Selectors are used to select the HTML Elements with special state like checked, active or visited. There are 31 Pseudo Class Selectors.
Table of Contents
Use of CSS Pseudo Class Selectors
Pseudo classes define different states of HTML Elements and CSS Pseudo Class Selectors are used to select all HTML Elements with a specific state.
For example: Pseudo Class Selectors can be used to select only visited links or elements that are active or elements with required attribute. For all these examples Pseudo Class Selectors can be used.
Syntax of CSS Pseudo Class Selector
The syntax of CSS Pseudo Class Selector is shown below.
a:visited {
color: red;
}
Colon(:) is an important part of all Pseudo Class Selectors.
Example of CSS Pseudo Class Selectors
Look at the simple example below, this simple example will change the color of paragraph element when mouse hovers over it.
p:hover {
color: blue;
}
This next example will change the color of all paragraph elements when mouse hovers over the div element.
div:hover p {
color: blue;
}
This next example will change the background color of first list item inside the ul tag.
ul li:first-child {
background-color: red;
}
List of CSS Pseudo Class Selectors
The List of all CSS Pseudo Class Selectors is given below.
| CSS Pseudo Class Selector | Example | Description |
|---|---|---|
| :active | a:active | Selects the active link. |
| :checked | input:checked | Selects checked input elements. |
| :disabled | input:disabled | Selects disabled input element. |
| :empty | div:empty | Selects every div element which has no children. |
| :enabled | input:enabled | Selects every enabled input element. |
| :first-child | li:first-child | Selects every list element that is the first child of it's parent. |
| :first-of-type | p:first-of-type | Selects every p element that is the first p type element of its parent. |
| :focus | input:focus | Selects the input element that has focus. |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects input elements with a value within a specified range |
| :invalid | input:invalid | Selects all input elements with invalid value. |
| :lang(language) | p:lang(en) | Selects every paragraph element with a lang attribute value starting with "en". |
| :last-child | p:last-child | Selects every p element that is the last child of it's parent. |
| :last-of-type | p:last-of-type | Selects every p element that is the last p element of it's parent. |
| :link | a:link | Selects all unvisited links. |
| :not(selector) | :not(p) | Selects every element on page that is not a paragraph element. |
| :nth-child(n) | p:nth-child(2) | Selects every paragraph element that is second child of it's parent. |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every paragraph element that is the second child of its parent, counting from the last child. |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every paragraph element that is the second p element of its parent, counting from the last child. |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every p element that is the second p type element of it's parent. |
| :only-of-type | p:only-of-type | Selects every p element that is the only p type element of it's parent. |
| :only-child | a:only-child | Selects every anchor element that is the only child of it's parent. |
| :optional | input:optional | Selects input elements which has no "required" attribute. |
| :out-of-range | input:out-of-range | Selects input elements with a value outside a specific range. |
| :read-only | input:read-only | Selects input element which is not editable. |
| :read-write | input:read-write | Selects input elements that is editable. |
| :required | input:required | Selects input elements with a "required" attribute. |
| :root | root | Selects the document's root element. |
| :target | #main:target | Selects the current active #main element. |
| :valid | input:valid | Selects all input elements with a valid value. |
| :visited | a:visited | Selects all visited links. |
Post a Comment