Compound selector with class name intersection of CSS

First look at the basic definition:

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

Intersection Selector

The intersection composite selector consists of two selectors that are directly connected, and the result is a selection of the intersection of their respective element ranges. The first one must be a tag selector, and the second must be a category selector or an ID selector. There can be no spaces between the two selectors and must be written consecutively.

Note that the first one must be a tag selector, such as P.CLASS1, but sometimes you will see. Class1.class2, which is 2 class selectors, is allowed in other browsers, but IE6 is incompatible. As the following table:

The intersection composite Selector browser support table for two class selectors:

Use of composite selectors

This is a simple tab menu:

The following is the HTML code:

<ulclass= "NAV">
<Liclass= "First"><ahref="">program</a></Li>
<Liclass= "Current"><ahref="">Collection</a></Li>
<Li><ahref="">Draft</a></Li>
<Liclass= "Last"><ahref="">Project</a></Li>
</ul>

To achieve this, we can use a composite selector in CSS .

Choose <a>Label

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

. Nav Li a {}

　　Select the first <a> element

To increase the fillet effect in the upper-left corner of the list, you need to select the first <a> element. This can be done with the following selector:

. Nav Li.first a {}

　　Select the last <a> element

To increase the fillet effect in the upper-right corner of the list, you need to select the last <a> element. This can be done with the following selector:

. Nav li.last a {}

　　Highlight current Page

By changing the color of the tab to show that the page is the current page, we can add the class name to the class name to implement it, as follows:

. Nav li.current a {}

　　Add a fillet style to the left and right corner of the current page

Now there is a problem, the first and last option is selected when the corner is right-angled. To reach the current page style at the selected time, the corners are rounded, and we need to write special selectors specifically for them, because now our class names are in the same element, so we can end up with the Intersect composite selector, as follows:

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

　　Results

This looks pretty simple, doesn't it? As mentioned above, the problem now is that both IE5 and IE6 do not support class name intersection compound selectors. IE5 and IE6 only recognize the last class name when they recognize the class name. The effect is as follows:

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

IE5 and IE6 the 2 selectors to:

. Topnav. Currents a {}
. Topnav. Current a {}

This means that these browsers will add rounded effects to all of the current pages, with the following effect:

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

The solution

You can add a current style to the first and last Li separately, but this adds to the burden of JS.

<ulclass= "NAV">;
<Liclass= "First First_current"><ahref="">program</a></Li>;
<Liclass= "Current"><ahref="">Collection</a></Li>;
<Li><ahref="">Draft</a></Li>;
<Liclass= "Last Last_current"><ahref="">Project</a></Li>;
</ul>; . Nav. first_current a{}
. Nav. Last_current a{}

Discuss

One way to do this is to use the CSS3 style instead of adding extra class names like first and last in the page. CSS3 allows us to select elements that are becoming more and more simple, with the following effects available for the tail effect:

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

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