Descendant selectors are used to select all descendants of a label, including descendants and grandchildren, and the descendant selector selects only the descendant tag for the specified parent (the first generation of the tag element).
The descendant selector uses an extra symbol (angle brackets >) to indicate a relationship between two elements.
For example: BODY>H1 selects all the first generation
Diagram of HTML tags
HTML code
After you understand the structure above, you can try the following code:
CSS Code
BODY>H2 { color:orange;}The above HTML code, a total of 2
Here are the more fun sub-selectors
: First-child
Select the first child label.
CSS Code
h2:first-child { color:orange;}The function of this selector is to find all the
This is because the first label of <body> is
Because
: Last-child
This selector is similar to the following: the First-child selector, but the last descendant of an element is selected.
CSS Code
li:last-child { font-size:2em;}As you can see, the font size of "small list C" and "List 3 (with links)" becomes larger. Because both items are the last item that is specified.
: Only-child
Select a descendant that is unique to an element.
HTML code
<p> <p> p</p></p><p> of the first P <p> the first p</p> of the second p <a href= "#" > The first a</a></p> of the second PCSS Code
p:only-child { color:orange;}The above style only acts on the first <p> <p> element. The second <p> because there are not only <p> elements, but also <a> elements, so the second <p> <p> element is not affected by the above style.
This selector is more difficult to understand. The style defined by this selector is valid only if the specified label is the only descendant of another label. That is, only one of the specified tags in the descendant is not available, and if the specified label has other sibling tags, the style defined by the selector will be invalidated.
: Nth-child
This selector is more complex to use, but is also particularly useful.
This selector makes it easy to define styles for rows that are separated in a table, items that are two items apart from a list, or other number of descendant elements.
This selector requires a value that determines which descendants to select.
The simplest of these values is the keyword, odd and even.
Odd is used to select odd descendant elements.
Even is used to select even descendant elements.
HTML code
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4 </li> <li>5</li> <li>6</li> <li>7</li></ul>CSS Code
Li:nth-child (odd) { background:pink;} Li:nth-child (even) { background:teal;}The subscript for the first child element is 1.
It is important to note that if there are other elements before the first <li>, then the first <li> subscript is not 1.
Like whatHTML code
<ul> <a href= "#" >a</a> <li>1</li> <li>2</li> < li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li></ul>The effect at this time is
Li:nth-child (odd) means finding the parent element of the <li> element that detects the parity of each <li> 's subscript through the parent element.
Because the first element of <ul> is <a>, the second element is <li>. That is, the first <li> subscript is 2, so the first subscript is a green background.
Using the above method, it is very easy to use different styles for each row in the table. However, there are some better and more powerful usages of nth-child ().
You can assign a number to: Nth-child () to select a descendant exactly. For example, to change the background color of the 4th <li> to Orange.
HTML code
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4 </li> <li>5</li> <li>6</li> <li>7</li></ul>CSS Code
Li:nth-child (4) { background:orange;}Similarly, here Li:nth-child (4) means to find the parent element of the <li> tag, and then find the 4th child element of the parent element.
If the HTML code is the following, the CSS code does not change in the case.
HTML code
<ul> <a href= "#" >a</a> <li>1</li> <li>2</li> <li >3</li> <li>4</li> <li>5</li> <li>6</li> <li >7</li></ul>The effect becomes this:
The 3rd <li> will be selected. Because the 3rd <li> in its parent element is the 4th row.
If you want to select a third item every 2 items, you can add the letter n after the number.
HTML code
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4 </li> <li>5</li> <li>6</li> <li>7</li> <li>8 </li> <li>9</li> <li>0</li></ul>CSS Code
Li:nth-child (3n) { background:orange;}The specified style is applied whenever the element that encounters an integer multiple of 3 is encountered.
If you want to start with the second descendant element, select the third descendant element for every 2 elements. You can add 2 to the back of the 3n.
HTML code
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4 </li> <li>5</li> <li>6</li> <li>7</li> <li>8 </li> <li>9</li> <li>0</li></ul>CSS Code
Li:nth-child (3n+2) { background:orange;}If you want to start with the 5th, change the style for the third descendant element of every 2 elements.
CSS Code
Li:nth-child (3n+5) { background:orange;}If you want to traverse backwards, the multiple in front of N will be changed to negative.
CSS Code
Li:nth-child (-n+3) { background:orange;}This means: from the third entry in the list, select each entry before this one.
If you want to start with the 4th element, select all the elements down. It can be written like this:
CSS Code
Li:nth-child (n+4) { background:orange;}The following is the Descendant Selector overview table
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
A detailed description of CSS positioning properties
CSS3 How to make a thin line less than one pixel
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
