Structural Pseudo-Classes

Excerpted from the book "HTML5 & CSS3 for the Real World, 2nd Edition" co-authored by Alexis Goldstein, Louis Lazaris and Estelle Weyl. This book is available in stores around the world, and you can also purchase the e-book version here.

So far, we have learned how to locate elements based on their attributes and states. CSS3 also allows us to position elements based solely on where they are in the tag. These selectors are classified as structural pseudo-classes.

Now these selectors may seem complex, but they make more sense when we look at how to apply them later. Except for IE8 and below, IE9 and newer versions and all other browsers support these selectors:

:root root element, in our HTML file, is the html element.

E:nth-child(n) nth sub-element E. n Parameters are explained in the description below.

E:nth-last-child(n) nth child element F (countdown from the last one). li:nth-last-child(1) will match the last item in any list, which is the same as li:last-child (see instructions below).

E:nth-of-type(n) In a given parent element, the nth element of type E is. The difference between nth-child and nth-of-type is explained in the description below.

E:nth-last-of-type(n) is the same as nth-of-type(n), but starts from the last element in the parent element.

Description: Parameters of structure selector

There are four pseudo-classes that use equation an b as parameters in brackets, or use the keywords odd and even. Structural pseudo-categories include :nth-child(an b), :nth-last-child(an b), :nth-of-type(an b) and :nth-last-of-type(an b). In the equation an b, a is the multiplier as an integer, b is the offset as an integer, and n is always the variable n.

In the simplest case, you can pass an integer. For example, E:nth-of-type(3) will locate the third E element child of a single parent element. You can pass one of two keywords odd or even to locate each other element. You can also pass numeric expressions more efficiently, such as E:nth-of-type(3n 1). 3n represents every three elements, defining the frequency, and 1 is the offset. The default offset is zero, so nth-of-type(3n) will match the 3rd, 6th, and 9th elements in the series, while nth-of-type(3n 1) will match the 1st, 4th, 7th, and so on.

Negative offsets are also allowed. CSS is language-based, not programming languages, so counts start at 1, not 0. There cannot be spaces between the multiplier a and the variable n, and the offset must be placed at the end.

With these numeric pseudo-classes, you can pinpoint the elements you want to locate without adding classes to the tag. The most common example is a table, where every other row is slightly darker in color for easier reading. We used to have to add odd or even classes to each tr to achieve this. Now we can simply declare tr:nth-of-type(odd) to locate each odd row without touching the mark. You can even go further with the three-color stripe table: Position tr:nth-of-type(3n), tr:nth-of-type(3n 1) and tr:nth-of-type(3n 2) and apply a different color for each.

E:first-child If E is the first child of its parent element, it is element E. This is the same as E:nth-child(1).

E:last-child If E is the last child of its parent element, it is element E, the same as E:nth-last-child(1).

:first-of-type is the same as :nth-of-type(1).

E:last-of-type is the same as :nth-last-of-type(1).

E:only-child If E is the only child of its parent element, it is element E.

E:only-of-type If E is the only E element of type in the direct child of its parent element, then it is element E.

Description: Sub-elements and types

When using the structure selectors of nth-of-type and nth-child, it is important to understand what "sub-elements" and "types" mean in this case. "Sube Elements" view all child elements that match counts and check whether the predecessor matches. Type first looks at all elements matching the predecessor and then matches according to the count.

For p:nth-child(3n), the browser views each third child element of the parent element. If the child element is p, it matches; if not, it does not match. For p:nth-of-type(3n), the browser looks at all p children of the parent element and matches every three ps.

Structural pseudo-classes are based on parent elements and start counting again for each new parent element. They only view elements that are direct child elements of the parent element. Text nodes are not part of the equation.

E:empty Elements without child elements; this includes text nodes, so

hello

and

will not match p:empty, but

and

will match. This selector also matches empty or invalid elements, such as

and. E:lang(en) Elements in languages ​​that use two letter abbreviations (e.g. en). Unlike E:[lang|=en] (where the lang attribute must exist as an attribute of element E), if the language is declared on the element itself or on any ancestor, E:lang(en) will match E.

E:not(exception) This is especially useful: it will select the element that matches the selector in parentheses.

The selector with the :not pseudo-class matches everything to the left of the colon and then excludes elements from that match group that also matches the content to the right of the colon. Left match is preferred. For example, p:not(.copyright) will first match all paragraphs in the document and then exclude all paragraphs that also have copyright classes from that collection. You can join multiple :not pseudo-classes together. input:not([type=checkbox]):not([type=radio]) will match all input elements on the page, except for elements of type check box or radio button.

FAQs on Structural Pseudoclasses

What are the different types of structural pseudo-classes?

Structural pseudo-classes are a subset of CSS pseudo-classes that allow you to select and style elements based on their position in the document tree. They include :root, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty,

,

, :nth-child(),

, and

. Each of these pseudo-classes has a unique feature that allows more precise styles of HTML elements. :nth-child() :nth-child(2):nth-child(odd) How do pseudo-classes work? :nth-child(2n 1)

Pseudo-class matches elements based on their position in a group of elements of the same level. It accepts a parameter that can be a number, keyword, or formula. For example, :nth-of-type() will select the second child element of its parent element, while :nth-child() or

will select all odd-numbered child elements.

What is the difference between :nth-of-type():nth-child() and :nth-child()? :nth-of-type() liWhile p and :nth-child() both select elements based on their positions, they vary in how they calculate these positions. :nth-of-type() Treat all elements as siblings regardless of their type, while li only calculates elements of the same type. For example, if you have a list of p and

elements,

will calculate both types of elements, while

will only calculate

or :first-child elements, depending on you Specified element. ul liHow to select and set the style of the first child element of the parent element? ul li:first-child { color: red; }

To select and set the style of the first child element of the parent element, you can use the pseudo-class. For example, if you want to change the color of the first element within , you can use the following CSS: .

:only-child What is the function of pseudo-classes?

:only-child Pseudo-class matches elements that are the only child elements of its parent element. This is useful when you only want to apply styles to an element when it doesn't have a sibling element. For example, you might want to add special styles to p elements only when they are the only child elements of div.

How to use :empty pseudo-class?

:empty Pseudo-class matches any element without child elements. This includes text nodes, comments, or other elements. For example, you can use it to hide an empty div, otherwise the div will take up space on the page: div:empty { display: none; }.

Can structural pseudo-class be combined?

Yes, you can combine structural pseudo-classes to create more specific selectors. For example, you can combine :nth-of-type() and :last-child to select the last type of li element within its parent element, provided that it is also the last child of its parent element.

Does all browsers support structural pseudo-classes?

Most modern browsers support structural pseudo-classes, but there may be some inconsistencies or lack of support in older browsers. Before using specific pseudo-classes in CSS, it is best to always check the current support level on sites like Can I Use.

Can structural pseudo-classes be used with pseudo-elements?

Yes, structural pseudo-classes can be used in conjunction with pseudo-elements. For example, you can use the ::before pseudo-element with the :first-child pseudo-class to add content before the first child of the parent element.

How to create dynamic styles using structural pseudo-classes?

Structural pseudo-classes can be used to create dynamic styles that respond to HTML structures. For example, you can use the :nth-child() pseudo-class with formulas to create a zebra-print table, or use the :hover pseudo-class to change the color of the link when you hover. The possibilities are infinite and limited only by your creativity.

The above is the detailed content of Structural Pseudo-Classes. For more information, please follow other related articles on the PHP Chinese website!