Descendant selectors for CSS

Source: Internet
Author: User
This time brings you the CSS descendant selector, the use of CSS descendants of the selection of considerations, the following is the actual case, together to see.

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 P

CSS 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.

    1. Odd is used to select odd descendant elements.

    2. 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 what

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.