CSS Combination Selector

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-class

In browsers that support CSS, different states of the link can be displayed in different ways

Example

a:link {color:#FF0000; } /* Unvisited link */ a :visited { color: #00FF00 
 ; } /* Visited links */ 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 Grammar</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.

All CSS pseudo-classes/elements

Selector Example 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 children
: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