Css learning selector: nth-child (n)

Source: Internet
Author: User

Css learning selector: nth-child (n)

Today, I learned a new small effect. For example, when a website changes the color of a line, for example, a black line or a white line, the zebra will show up. When you touch a line with your mouse, color background changes, especially when you connect to the database, simple code is very important.

At this time, an interesting friend appeared: nth-child (n) was always saying "look for me ", this means that the selector matches the nth child element of its parent element, starting from 0. For example, p: nth-child (2) indicates the p element whose subscript is 2, which is 3rd elements; if you want to implement different parity rows, you can directly use odd for odd numbers and even for even numbers, which is convenient. If you use (2n + 1) and (2n), it is OK;


. History-content: nth-child (2n + 1) {background: # D8F0E7 ;}. history-content: nth-child (2n) {background: # eee ;}. history-content: hover {background: # fff ;}

The effect is the same as the following:



. History-content: nth-child (odd) {background: # D8F0E7 ;}. history-content: nth-child (even) {background: # eee ;}. history-content: hover {background: # fff ;}
The final effect is as follows: one line is gray, one line is green, and the touch is white.



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.