The best CSS pseudo-classes Tutorial In 2024, In this tutorial you can learn grammar,anchor pseudo classes,Examples,Pseudo-classes and CSS classes,CSS -: first - child pseudo-class,Matching a <p> element,Examples,Match all <p> elements in the first <i> element,Examples,Examples,CSS -: lang pseudo-class,Examples,More examples,All CSS pseudo-classes / elements,
CSS pseudo-class selectors are used to add some special effects.
Pseudo-class syntax:
CSS classes can also use pseudo-class:
CSS support in browsers, different state of the link can be displayed in different ways
Note: CSS definition, a: hover must be placed in a: link and a: after visited, is effective.
Note: CSS definition, a: active must be placed in a: hover after, to be effective.
Note: The name ofpseudo-class is not case-sensitive.
Pseudo-classes can be used in conjunction with CSS classes:
If the link above example has been visited, it will be displayed in red.
You can use the: first-child pseudo-class selects the first child element
Note: You must be declared in the previous version of IE8 <DOCTYPE!> , Like this: first-child to take effect.
In the following example, the selector matches the <p> element as the first child of any element elements:
The first <i> element in the following example, the selector matches any <p> element:
: Lang pseudo-class allows you to have the ability for different languages define special rules
Note: IE8 must declare the <DOCTYPE!> To support; lang pseudo-class.
In the following example,: lang class type attribute value of q no element definitions quotes:
Add 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.
Selector | Example | Example shows |
---|---|---|
: checked | input:checked | All selected form element |
: disabled | input:disabled | Select all disabled form elements |
: empty | p:empty | Select all p elements have no children |
: enabled | input:enabled | Select all enabled form elements |
: first-of-type | p:first-of-type | Select each parent element is the first child element p p elements |
: in-range | input:in-range | Select the element values within a specified range |
: invalid | input:invalid | Select all invalid elements |
: last-child | p:last-child | Select all p elements in the last child element |
: last-of-type | p:last-of-type | Selecting each p element is the last element of a parent element p |
: not (selector) | :not(p) | Select all the elements other than the p |
: nth-child (n) | p:nth-child(2) | Select all p elements in the second sub-element |
: nth-last-child (n ) | p:nth-last-child(2) | Select all the elements of the inverse of p second child element |
: nth-last-of-type (n) | p:nth-last-of-type(2) | Select all p elements is the reciprocal of the second sub-element p |
: nth-of-type (n ) | p:nth-of-type(2) | Select all p elements in the second sub-element for the p |
: only-of-type | p:only-of-type | Select all just a child element of p elements |
: only-child | p:only-child | Select all just a child element of p elements |
: optional | input:optional | Choose not "required" attribute of the element |
: out-of-range | input:out-of-range | Select attribute element outside the specified range of values |
: read-only | input:read-only | Select the read-only attribute of the element attributes |
: read-write | input:read-write | Choose not to read-only attribute of the element properties |
: required | input:required | Choose "required" attribute specifies the element properties |
: root | root | Select the root element of the document |
: target | #news:target | Select the current activity #news element (click on a URL that contains the name of the anchor) |
: valid | input:valid | Select all the valid values for properties |
: link | a:link | Select all unvisited links |
: visited | a:visited | Select all visited links |
: active | a:active | Select is an active link |
: hover | a:hover | Put the mouse on the link status |
: focus | input:focus | After selecting the input element has focus |
: 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 | <] P> element selector matches any element belonging to the first child element |
: before | p:before | Insert content before each <p> element |
: after | p:after | Insert content after each <p> element |
: lang (language) | p:lang(it) | lang attribute selection <p> element to a start value |