IE8 :nth-child and :before

by

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.

More Related Contents:

  1. Should I use single or double colon notation for pseudo-elements?
  2. How to make Internet Explorer 8 to support nth child() CSS element?
  3. :active css selector not working for IE8 and IE9
  4. how do I make device specific selectors in css [closed]
  5. Is there a “previous sibling” selector?
  6. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  7. CSS selector for first element with class
  8. What does the “+” (plus sign) CSS selector mean?
  9. Is there a CSS selector by class prefix?
  10. How do I select an element based on the state of another element in the page with CSS?
  11. Does the order of classes listed on an item affect the CSS?
  12. Opacity CSS not working in IE8
  13. Select all child elements recursively in CSS
  14. CSS “and” and “or”
  15. Using the last-child selector
  16. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  17. What is the difference between :focus and :active?
  18. Opacity of div’s background without affecting contained element in IE 8?
  19. How to select label for=”XYZ” in CSS?
  20. In which direction do selector engines read, exactly?
  21. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  22. Can I colour backgrounds of selected items in HTML select options with CSS only?
  23. CSS3 combining selectors with OR instead of AND
  24. Why doesn’t this CSS :not() declaration filter down?
  25. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  26. How to show the first N elements of a block and hide the others in css?
  27. word-wrap:break-word not working in IE8
  28. What is the difference between :before and ::before?
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment