CSS class name intersection compound Selector

Source: Internet
Author: User

First, let's take a look at the basic definition:

A compound selector is a set of two or more basic selectors that are connected in different ways, including the intersection selector, Union selector, and descendant selector.

Intersection Selector

The intersection compound selector is composed of two selectors connected directly. The result is the intersection of the selected element ranges. The first must be the tag selector, and the second must be the category selector or ID selector. There must be no space between the two selectors and continuous writing is required.

Note that the first one must be a tag selector, such as p. class1, but sometimes you can see. class1.class2, that is, both are class selectors. This is allowed in other browsers, but IE6 is not compatible. See the following table:

The "intersection" Compound selector of the two class selectors supports tables in the browser:

Use of compound Selector

This is a simple tab menu:

The following is the html code:

<Ul class = "nav">
<Li class = "first"> <a href = ""> Program </a> </li>
<Li class = "current"> <a href = ""> collection </a> </li>
<Li> <a href = ""> draft </a> </li>
<Li class = "last"> <a href = ""> project </a> </li>
</Ul>

To achieve the above effect, we can use a composite selector in css.

Select <a>Tag

You can use a selector to define all<a>Element, as follows:

. Nav li {}

  Select the first<a>Element

To add the rounded corner in the upper left corner of the list, you need to select the first<a>Element. This can be implemented using the following selector:

. Nav li. first {}

  Select the last<a>Element

To add the rounded corner in the upper-right corner of the list, you need to select the last<a>Element. This can be implemented using the following selector:

. Nav li. last {}

  Highlight the current page

You can change the tab color to display the current page. You can add the current class name to the class name, as shown below:

. Nav li. current {}

  Add a rounded corner style for the left and right sides of the current page

Now there is a problem. When the first and last options are selected, the corner is right. To achieve the selected style of the current page and the corner is also rounded, We need to write a special selector for them. Because our class names are all in the same element, therefore, we can use the intersection compound selector as follows:

. Nav. first. current {}
. Nav. last. current {}

  Result

This looks simple, isn't it? As mentioned above, the current problem is that both IE5 and IE6 do not support the compound selector of class name intersection. IE5 and IE6 only recognize the last class name when identifying the class name. The effect is as follows:

. Nav. first. current {}
. Nav. last. current {}

IE5 and IE6 parse the two selectors:

. Topnav. currents {}
. Topnav. current {}

This means that these browsers will add a rounded corner to all the current pages. The effect is as follows:

In IE7, there is no problem, indicating that IE7 also supports the class name intersection compound selector.

Solution

You can add a current style to the first and last li, but this increases the js burden.

<Ul class = "nav">;
<Li class = "first first_current"> <a href = ""> Program </a> </li>;
<Li class = "current"> <a href = ""> collection </a> </li>;
<Li> <a href = ""> draft </a> </li>;
<Li class = "last last_current"> <a href = ""> project </a> </li>;
</Ul>;. nav. first_current {}
. Nav. last_current {}

Discussion

There is a way to avoid adding redundant class names such as first and last in the page, that is, using the css3 style. Css3 makes it easier to select elements and achieves the following effects:

Li: first-of-type {}
Li: last-of-type a {} 3 1

Source: http://www.codesocang.com/news/Webqianduan/2014/0511/7604.html

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.