Проблема применения nth-child в одном классе.

Question

Во-первых, большое спасибо за ваше время заранее.

Я работаю в высшем учебном заведении в Филадельфии. Мы пытаемся использовать псевдокласс n-го ребенка, чтобы сделать все остальные строки в наших таблицах серыми.

Строка кода, которую я написал в наших файлах Styles.css:

table.oddrows tr:nth-child(2n+3) {background-color: #eeeeee;}

Я использовал 2n + 3, потому что первая строка таблицы будет темно-серой, чем любая другая строка, потому что это будет заголовок, поэтому я хочу, чтобы он начал применять цвет фона к 3-й строке, а затем каждые две строки после этого (то есть 3,5,7 и т. д.)

Мы используем CMS Ektron (версия 8.01 SP1), и по любой причине класс просто не будет отображаться в списке доступных классов, и когда я пытаюсь применить его вручную (то есть вручную помещая <table class="oddrows" width="500"><tbody> в тело кода) это все еще не работает.

Я несколько раз очищал свой кеш и все еще рисую пробел. (Я использую IE 8, для записи)

Есть идеи? Все, что я прочитал, говорит, что мой синтаксис правильный, и я готов вырвать мои волосы.

Еще раз спасибо за ваше время!

Answer 1

Селектор nth-child не поддерживается в IE8.Для IE он доступен только в версии 9 и выше.

Answer 2

Чтобы заставить что-то подобное работать, вам, возможно, придется отклониться от чистого CSS и использовать некоторый jQuery. Если вы уже используете jQUery для других целей на сайте, это не составляет никакого труда, так как это добавит только пару строк к вашему заявлению о готовности документа следующим образом:

jQuery(document).ready(function() {
   $('.oddrows tr:nth-child(2n+3)).addClass("darker");  
});

У вас также будет класс CSS .darker:

.darker {background-color:#eee}

Теперь, если вы еще не используете jQuery (или у вас нет опции), это, очевидно, не сработает.