CSS child selectors

I have two labels within a li amd i want to style second label, is there a way to target the second label. It has to work on IE7

I wrote like this

         <ul>
          <li>
             <label for="asi plan status">A&SI Accountable VP:</label>
             <label>Tye Schriever</label>
           </li>
            </ul>

u开发者_运维技巧l li label label{color:red}

Any other way..?

you can use css2 :first-child property define your properties for second label in common & through first-child you can override the css property for first label like this:

label{color:red}
label:first-child{color:yellow}

it's supported by IE7 also but approach is different.

If you only need to target the second label and nothing else, you can use

ul li label + label

No need for overrides or CSS3's :last-child or adding classes to work around IE, etc. Although the comments mention IE7 and IE8 having problems with the + selector, it should work properly in this situation.

You may use the :last-child-selector, but that isn't supported by Internet Explorer.

li label:last-child { color:red }

Assign a class-attribute to the label instead, to get it properly working on all browsers.

As other people have mentioned, there are legitimate CSS selectors to achieve what you want, but IE7 doesn't support those selectors.

When I need to patch support for :last-child in IE7, I use this technique with jQuery:

$('li label:last-child').addClass('last-child');

And then in my CSS I can use use

li label.last-child {
  /* some styles here */
}

So we leverage jQuery excellent CSS selector support to apply a class to the elements you want to style, and then style them in the CSS>