Ie8 doesn't understand the nth-child so you can give rules to other browsers to counteract the ie8 rules set by other means. However, you realise that li + li + li a will select the third list plus any list elements that follow and not just the third like nth-child.

PicnicTutorials
—
2013-01-22T18:39:03Z —
#3

No I actually did not realize that. But there are only 3 list items anyway so it works in this case. I messed with > and ~ (admittedly not my best known rules) but couldn't seem to target it.

Jeff_Mott
—
2013-01-22T20:57:32Z —
#4

I didn't double check to see if that works, but wouldn't IE conditional comment classes be cleaner?

Yes I usually advocate CCs for IE8 but I happen to know that Eric doesn't like them so I sidestepped the issue.:)

There is an issue with specificity in using the boiler plate method as you are adding a class to the rule unlike plain old fashioned hacks or separate CCs. In the end it does boil down to preference and as long as you are consistent it doesn't make a lot of difference.

PicnicTutorials
—
2013-01-23T11:38:11Z —
#6

This is true. I haven't used CC's for the last 5 years. Why? They make my code look ugly

PicnicTutorials
—
2013-01-23T12:20:58Z —
#7

Forgive my ignorance. I've always just used classes and such to target lesser versions of IE. Now that IE8 is as low as I go I have a few more options. Having a little trouble fully understanding this...

onoff li a {

color:green;}

onoff li+li a {

color:red;}

onoff li+li+li a {

color:green;}

So if I wanted to get this list item color back to green (and target ie8) then I'd have to overwrite the 2nd list item? Then they would all be green from there on out. Anyway to target ie8 without classes? Or any browser for that matter without using li:nth-child(2)?

Jeff_Mott
—
2013-01-23T12:23:16Z —
#8

This is true. I haven't used CC's for the last 5 years. Why? They make my code look ugly

I'm baffled that you consider your proposed hacks to be less ugly, but... OK.

PicnicTutorials
—
2013-01-23T12:34:54Z —
#9

Jeff_Mott said:

I'm baffled that you consider your proposed hacks to be less ugly, but... OK.

There are plenty of people that don't use CC's. If I'm resourceful enough to get by without them then more power to me. Plus I don't like to maintain two stylesheets.

PaulOB
—
2013-01-23T15:27:06Z —
#10

EricWatson said:

Forgive my ignorance. I've always just used classes and such to target lesser versions of IE. Now that IE8 is as low as I go I have a few more options. Having a little trouble fully understanding this...

#onoff li a {color:green;}

#onoff li+li a { color:red;}

#onoff li+li+li a { color:green;}

So if I wanted to get this list item color back to green (and target ie8) then I'd have to overwrite the 2nd list item? Then they would all be green from there on out.

Yes that's correct you need the extra rule to reset anything that follows.

Anyway to target ie8 without classes? Or any browser for that matter without using li:nth-child(2)?

There are some other invalid hacks around but some of the ie8 ones hit IE9 as well which is why you have to be careful with hacks.

PicnicTutorials
—
2013-01-23T15:54:05Z —
#11

Ahh yes. I just found that one out this morning but didn't put 2 and 2 together. That works well. All three of those work perfect! Any other ones Paul that you know of like the ie6/7 ones that you don't have to overwrite? I know those are more dangerous. But for whatever reason I know that the ie6/7 ones are deamed safe. So any deamed safe ones found yet for ie8 that one doesn't have to overwrite? Thanks

PicnicTutorials
—
2013-01-23T16:03:00Z —
#12

Oh wait. Would the p then have to be the last child to be targeted?

PicnicTutorials
—
2013-01-23T16:49:20Z —
#13

What about body p {red} body:nth-child(1) p {blue}. Without testing I think that would work?

PicnicTutorials
—
2013-01-23T17:04:09Z —
#14

Ahhh...

"Anyway, I'd like to clear up something about :last-child (and, by

extension, :first-child). 'body:last-child' means "select any body element that is the last child of its parent element". It does NOT mean "select the last child element of the body element". To do the latter, you'd write 'body > *:last-child'. If you just write 'body *:last-child', that would select any element that is the last child of another element and is also a descendant of the body element. 'body > *:last-child' selects any element that's the last child of another element and is also a child of the body element, which pretty much restricts you to just the body's last child. Similarly, 'body:first-child' would select any body element that's the first child of its parent (which is html) -- and since every document I've ever seen has at least a head element before the body element, 'body:first-child' would fail to find any matches. To do your own translations of selectors like this, check out the SelectORacle at <http://gallery.theopalgroup.com/selectoracle/>. Anyway, this could be (and apparently is being) used as a CSS hack to feed "advanced" CSS to browsers that understand :last-child, in a manner very much similar to the 'html>body' hack. Whether that's actually a good idea probably depends on your opinion of CSS hacks in general."

-- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone"CSS is much too interesting and elegant to be not taken seriously." -- Martina Kosloff (http://mako4css.com/)

Jeff_Mott
—
2013-01-23T18:34:23Z —
#15

EricWatson said:

Plus I don't like to maintain two stylesheets.

I think you misunderstood the way it was suggested to use CCs. You won't need two stylesheets. Just one normal stylesheet, except that you can use an ".ie8" class selector.

PicnicTutorials
—
2013-01-23T19:07:44Z —
#16

Jeff_Mott said:

I think you misunderstood the way it was suggested to use CCs. You won't need two stylesheets. Just one normal stylesheet, except that you can use an ".ie8" class selector.