CSS Composite selector: class name intersection compound selector with CSS

Article Introduction: the class name intersection compound selector using 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 and set selector, and the descendant selector.

Intersection Selector

The intersection compound selector is composed of two selectors directly connected, and the result is to select the intersection of their respective element ranges. The first of these must be the tag selector, and the second must be a category selector or an ID selector. These two selectors cannot have spaces between them and must be written continuously.

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

Two class selector "intersect" composite selector browser support table

Mac:safari 4.0	Support
Mac:chrome 5.0	Support
Mac:firefox 3.6	Support
Mac:opera 10	Support
Win:firefox 3.6	Support
Win:opera 10	Support
Win:ie6	does not support
Win:ie7	Support
Win:ie8	Support

Use of composite selectors

This is a simple tab menu:

The following is the HTML code:

1 2 3 4 5 6

<ul class="nav">     <li class="first"><a href="">节目</a></li>     <li class="current"><a href="">合集</a></li>     <li><a href="">草稿</a></li>     <li class="last"><a href="">项目</a></li> </ul>

In order to achieve the above effect, we can use the composite selector in CSS.

Select <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 rounded corners in the upper-left corner of the list, you need to select the first <a> element. This can be accomplished by using the following selector:

. Nav Li.first A {}

Select the last <a> element

To increase the rounded corners in the upper-right corner of the list, you need to select the last <a> element. This can be accomplished by using the following selector:

. Nav li.last A {}

Highlight current Page

By changing the tab color to show that the page is the current page, we can add this class name to the class name to implement the following:

. Nav li.current A {}

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

Now, there's a problem. When the first and last options are selected, the corners are angled. In order to achieve the selected time is the current page style, corner is rounded effect, we need to give them special to write a selector, because now our class name in the same element, so we can eventually use the intersection of the 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 the class name intersection compound selector. 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 resolve these 2 selectors to:

. Nav. Current a {}
nav. Current a {}

This means that these browsers add rounded corners to all current pages, and the effect is as follows:

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

Way to solve

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

1 2 3 4 5 6

<ul class="nav">;     <li class="first first_current"><a href="">节目</a></li>;     <li class="current"><a href="">合集</a></li>;     <li><a href="">草稿</a></li>;     <li class="last last_current"><a href="">项目</a></li>; </ul>;

. Nav. First_current a {}
. Nav. Last_current a {}

Discuss

There is a way that we don't need to add extra class names like the one in the page to the top, and that's using the CSS3 style. CSS3 lets you select elements to become simpler, and the result of a kinsoku effect can be as follows:

Li:first-of-type a {}
li:last-of-type a {}