CODEWITHSUNDEEP
csscss-selectors
Ravi
Ravi

Reputation: 4085

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>

ul li label label{color:red}

Any other way..?

Upvotes: 0

Views: 2234

Answers (4)

BoltClock
BoltClock

Reputation: 724402

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.

Upvotes: 2

sandeep
sandeep

Reputation: 92843

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.

Upvotes: 2

Alex
Alex

Reputation: 9481

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>

Upvotes: 0

feeela
feeela

Reputation: 29932

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.

Upvotes: 1

Related Questions