Latest web development tutorials

CSS pseudo-classes

CSS pseudo-class selectors are used to add some special effects.

grammar

Pseudo-class syntax:

selector:pseudo-class {property:value;}

CSS classes can also use pseudo-class:

selector.class:pseudo-class {property:value;}

anchor pseudo classes

CSS support in browsers, different state of the link can be displayed in different ways

Examples

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

try it"

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 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 above example has been visited, it will be displayed in red.

CSS -: first - child pseudo-class

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.

Matching a <p> element

In the following example, the selector matches the <p> element as the first child of any element elements:

Examples

<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>

try it"

Match all <p> elements in the first <i> element

The first <i> element in the following example, the selector matches any <p> element:

Examples

<html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

try it"
<H2 Match all as the first child element of the <p> element in all <i> elements:

Examples

<html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

try it"

CSS -: lang pseudo-class

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

Examples

<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

try it"

Examples

More examples

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.

All CSS pseudo-classes / elements

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