IE8 CSS Selector

CSS3 Selectors in IE8?

With jQuery code, you can use these few lines to toggle a class on all your checkboxes (or on it's container) any time it's checked or unchecked. This then lets you use regular CSS code in all browsers.

$("input[type='checkbox']").click(function() {
    $(this).parent().toggleClass("checked", this.checked);
});

Working example here: http://jsfiddle.net/jfriend00/7jA5r/.

If you dynamically create checkboxes, then you could use the dynamic form of .on() to make sure to catch them.

I would personally rather use a solution with a few lines of code like this than use a heavy library that tries to add CSS style file capabilities. If you were going to use that, make sure you understand what's really going on under the covers before you adopt it.

If you just wanted a selector libraryby itself, the Sizzle selector library works across a wide variety of browsers including all the way back to IE6. It will adapt to the capabilities of the host browser, using as many built-in capabilities as are present and using it's own code when the host browser does not support an explicit capability.

You can use just the selector library itself from here or it is also the selector library inside of jQuery.

It's extremely simple to use. You just do something like this:

var items = Sizzle(":checked");

and you will have an array of DOM elements that match the selector.

IE8 :nth-child and :before

You can (ab)use the adjacent sibling combinator (+) to achieve this with CSS that works in IE7/8.

See: http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}

You cannot emulate more complex variations of :nth-child() such as :nth-child(odd) or :nth-child(4n+3) with this method.

CSS selectors not applying in IE7 and IE8

This site is built using HTML5 which not supported by ie7 and ie8 and not fully supported by ie9.

take a look for modernizr :

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

or you may want to re-factor your HTML using XHTML by replacing nav, section, header tag with supported tags

How to use CSS3 selectors to ignore IE8?

CSS hacks is maybe not elegant, though they still get the job done.

There is a few CSS hacks for IE8, read more at: http://browserhacks.com/

Here is one, using @media \0screen { ... }

p {  color: green;}
@media \0screen {  p {    color: red;  }}

<p>paragraph 1</p><p>paragraph 2</p><p>paragraph 3</p>

IE8 CSS selector ~ (tilde) addresses only first element

Because the tilde is a CSS3 selector, it is buggy in IE7 & 8. Consider using Modernizr as a way to bridge the gap between IE8's CSS2 capabilities and modern CSS3 selectors.

Edit based on the rest of the comments:
If you're considering dropping support for IE8, check your analytics first to make sure too many people won't be affected. If the tilde selector + css tooltips aren't working, you should make sure to add a title to the links so people in IE can still see [admittedly ugly] tooltips.

IE8 CSS :not selector

Without the need of using javascript, you may simply define those properties for all links

ul.dynatree-container a {
    color:black;
    text-decoration:none;
    vertical-align:top;
    margin:0;
    margin-left:3px;
    border:1px solid white
}

and thus revert them with

ul.dynatree-container a.remove {
    ...
}

A bit verbose but it will work also on IE8

IE8 CSS Selector pure CSS

On IE8 that rule can be replaced with

li + li  {
    color: green;   
}

Codepen: http://codepen.io/anon/pen/NqMwrW

IE8 and jQuery selectors

The selector works correctly on the jQuery side...but IE8 discards the style rule entirely (in compliance with the specification) because it doesn't recognize nth-child:

tr:nth-child(odd) td, tr.odd td {
  background-color: #86B486;
}

If you split it, it'll work correctly:

tr:nth-child(odd) td {
  background-color: #86B486;
}
tr.odd td {
  background-color: #86B486;
}

Here's the original version (a single rule IE8 removes) and here's a fixed sample, with the rule split.

For completeness sake, reversing the rule like this doesn't help:

tr.odd td, tr:nth-child(odd) td {
  background-color: #86B486;
}