Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the pseudo-class of css3". In the daily operation, I believe that many people have doubts about what the pseudo-class of css3 is. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "what is the pseudo-class of css3?" Next, please follow the editor to study!

Css3 pseudo-classes include: ": first-of-type", ": last-of-type", ": only-of-type", ": only-child", ": last-child", ": root", ": empty", ": target", ": not" and so on.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Pseudo class of css3

The selector example shows that CSS:first-of-typep:first-of-type selects the first p element where each p element is its parent 3:last-of-typep:last-of-type selects the last p element where each p element is its parent 3:only-of-typep:only-of-type selects that each p element is its parent unique p element 3:only-childp:only-child selects each p element is its The only child element of the parent 3:nth-child (n) p:nth-child (2) Select the second child element of each p element that is its parent 3:nth-last-child (n) p:nth-last-child (2) Select the second child element of each p element that is its parent Select the second p element 3:nth-last-of-type (n) p:nth-last-of-type (2) each p element is its parent from the last child count 3:nth-of-type (n) p:nth-last-of-type (2) each p element is the second p element of its parent, and each p element is the last child of its parent from the last child count 3:last-childp:last-child. 3:root:root selects the root element of the document 3:emptyp:empty selects each p element without any children (including text nodes) 3:target#news:target selects the currently active # news element (URL with clicks of the anchor name) 3:enabledinput:enabled selects each enabled input element 3:disabledinput:disabled selects each disabled input element 3:checkedinput:checked selects each selected input Element 3:not (selector): not (p) selects the part of the 3::selection::selection matching element that is not a p element that is selected by the user or is highlighted. The 3:out-of-range:out-of-range matching value of the input element outside the specified interval is within the specified range. The input element 3:read-write:read-write is used to match readable and writable. The element 3:read-only:read-only is used to match the element 3:optional:optional that sets the "readonly" (read-only) attribute, the optional input element 3:required:required, to match the element 3:valid:valid with the "required" attribute set, the element 3:invalid:invalid, which has a legal input value, to match element 3, which has an illegal input value.

Let's look at some css3 pseudo-classes through examples.

: first-of-type

Select all elements of the first child element of a specific type of its parent element

$(document) .ready (function () {$("p:first-of-type") .css ("background-color", "pink");})

P

P1

P2

Span

P1

P2

: last-of-type

Select all elements that belong to the last child element of a specific type of parent element

$(document) .ready (function () {$("p:last-of-type") .css ("background-color", "pink");})

P1

P2

P1

P2

Span

: only-of-type

Select all elements that belong to a particular type of child element of its parent element

$(document) .ready (function () {$("p:only-of-type") .css ("background-color", "pink");})

P1

P2

P

Span

P

: only-child

Select each element that belongs to the only child of its parent element

$(document) .ready (function () {$("p:only-child") .css ("background-color", "pink");})

P1

P2

P

P1

P2

: nth-child (n)

Select all elements of the nth child element of an unlimited type belonging to its parent element

$(document) .ready (function () {$("p:nth-child (3)") .css ("background-color", "pink");}); body H2

Body p1

Body p2 (the third child element of body).

Div span

Div p1

Div p2 (the third child element of div)

Div p3 .

Div2 p1

Div2 p2

Div2 p3 (the third child element of div)

Body p3

: nth-last-child (n)

Select all elements of the nth child element of an unlimited type belonging to its parent element and count from the last child element.

$(document) .ready (function () {$("p:nth-last-child (3)") .css ("background-color", "pink");}); body H2

Body p1

Body p2 (the third child element of body).

Div span

Div p1

Div p2 (the third child element of div)

Div p3 .

Div2 p1

Div2 p2

Div2 p3 (the third child element of div)

Body p3

: nth-of-type (n)

Select all elements of the nth child element of a specific type of its parent element

$(document) .ready (function () {$("p:nth-of-type (3)") .css ("background-color", "pink");}); body H2

Body p1

Body p2 (the third child element of body).

Div span

Div p1

Div p2 (the third child element of div)

Div p3 .

Div2 p1

Div2 p2

Div2 p3 (the third child element of div)

Body p3

: nth-last-of-type

Select all elements of the nth child element of a specific type of its parent element and count from the last child element

$(document) .ready (function () {$("p:nth-last-of-type (3)") .css ("background-color", "pink");}); body H2

Body p1

Body p2 (the third child element of body).

Div span

Div p1

Div p2 (the third child element of div)

Div p3 .

Div2 p1

Div2 p2

Div2 p3 (the third child element of div)

Body p3

At this point, the study of "what is the pseudo-class of css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.