What is a pseudo-class?
Pseudo-class for a particular state of the elements is defined. For example, it can be used:
- When a user hovers over an element to set style
- Access links to different styles and unvisited
- Set element in obtaining focus style
The syntax of pseudo-classes
As a descendant selector matches all elements specified element of future generations. The following example selects <div> all <p> elements within the element:
选择器:伪类 { 属性:值; }Links can be displayed in different ways:
/* 未访问的链接 */
a:link { color: red; }
/* 已浏览过的链接 */
a:visited { color: green; }
/* 鼠标悬停时候的链接 */
a:hover { color: hotpink; }
/* 选定的链接 */
a:active { color: blue; }Note: A: hover must be defined in CSS A: Link and after a: visited before they can take effect! a: active must be a: hover to be effective after the CSS definitions! Pseudo-class names are case insensitive.
Pseudo-classes and CSS Classes
Use pseudo-classes can be combined with CSS classes: When you hover over a link in the example, it will change the color:
a.highlight:hover { color: #ff0000; }Hover over <div>
: Hover using exemplary pseudo-class in the <div> element:
div:hover { background-color: blue; }Simply hover tooltip
Hover over <div> element to display the <p> element (tool tips)
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}: First-child pseudo-class
: first-child pseudo-element is a first class designation submatch another element. In the following example, the selector matches any element of the first child element <p> element:
p:first-child { color: blue; }All match the first <p> element in the <i> element
p i:first-child { color: blue; }Match all <i> all of the first sub-element <p> elements
p:first-child i { color: blue; }: Lang pseudo-class
: lang pseudo-class allows different languages define special rules. In the following example,: lang using lang = "no" is defined <q> element reference:
q:lang(no) { quotes: "~" "~"; }All CSS pseudo-classes
| Selector | example | description |
|---|---|---|
| :active | a:active | Select active activation link |
| :checked | input:checked | Select each selected <input> element |
| :disabled | input:disabled | Select each disabled <input> element |
| :empty | p:empty | Without selecting each subelement <p> element |
| :enabled | input:enabled | Select each enabled <input> element |
| :first-child | p:first-child | Selected as its parent element of the first child of each <p> element |
| :first-of-type | p:first-of-type | Select each <p> element, which is the first parent element <p> element |
| :focus | input:focus | Select <input> element has the focus |
| :hover | a:hover | When hovering over a link options |
| :in-range | input:in-range | Selecting a value within the specified range <input> element |
| :invalid | input:invalid | Select All <input> element has an invalid value |
| :lang(language) | p:lang(it) | Selecting a lang attribute value "it" at the beginning of each <p> element |
| :last-child | p:last-child | Chosen as the last child of its parent each <p> element |
| :last-of-type | p:last-of-type | Select each <p> element, it is the last of the parent element <p> element |
| :link | a:link | Select all unvisited links |
| :not(selector) | :not(p) | Each element is not selected <p> element |
| :nth-child(n) | p:nth-child(2) | Selected as a second child of the parent of each <p> element |
| :nth-last-child(n) | p:nth-last-child(2) | Select each <p> element as a second child of the parent element, counted from the last child element |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Select each <p> element as the second parent element <p> element, counted from the last child element |
| :nth-of-type(n) | p:nth-of-type(2) | Select each <p> element, which is the second parent element <p> element |
| :only-of-type | p:only-of-type | Select each <p> element, which is the only parent element <p> element |
| :only-child | p:only-child | Select each <p> element, it is the only child element of the parent element |
| :optional | input:optional | Choice is not "required" attribute of the <input> element |
| :out-of-range | input:out-of-range | Select <input> element, the value outside the specified range |
| :read-only | input:read-only | Selecting a designated "readonly" attribute <input> element |
| :read-write | input:read-write | Choice is not "readonly" attribute <input> element |
| :required | input:required | Choose to specify the "required" attribute of the <input> element |
| :root | root | Select the root element of the document |
| :target | #news:target | Select the currently active #news element (click on the URL contains the name of the anchor) |
| :valid | input:valid | Select All <input> element having a valid value |
| :visited | a:visited | Select all visited links |
All CSS pseudo-elements
| Selector | example | description |
|---|---|---|
| ::after | p::after | Insert after each <p> element |
| ::before | p::before | Inserts before each <p> element |
| ::first-letter | p::first-letter | Select the first letter of each <p> element |
| ::first-line | p::first-line | Selecting a first row of each <p> element |
| ::selection | p::selection | Select the element portion selected by the user |