Могу ли я применить CSS на основе индекса?

Question

Допустим, у меня есть 50 элементов сетки. Если его широкий список, то читателям будет легко, если я раскрасю его нечетно и даже по-разному. Теперь допустим, что я хочу сделать это и раскрашивать каждый 5-й дел. Есть ли способ выбрать, какой CSS применить на основе числа? нравится вместо

<div class="odd">blah</div>
<div class="even">blah</div>
<div class="odd">blah</div>
<div class="even">blah</div>
<div class="fifthOdd">blah</div>
...
<div class="fifthEven">blah</div>

сделать что-то вроде

<div class="1">blah</div>
<div class="2">blah</div>
...
<div class="5">blah</div>
...
<div class="10">blah</div>

и разрешить тому, кто пишет css, выбрать, как работает цветовая схема на основе их индекса?

Answer 1

Да, с nth-child . Обратите внимание, что nth-child не работает в IE, но это допустимый селектор jQuery, поэтому вы можете использовать его как с современными браузерами и чистым CSS, так и со всеми браузерами и небольшим количеством презентационного JavaScript.

Answer 2

Вы можете использовать jQuery для выбора всех четных или нечетных узлов, а затем применить к ним класс css.

http://api.jquery.com/nth-child-selector/

$('#parentDiv:nth-child(even)').addClass('evenDivs');
$('#parentDiv:nth-child(odd)').addClass('oddDivs');

Answer 3

Предполагая, что вы действительно можете использовать числа в качестве имен классов CSS, CSS может выглядеть как

div.1, div.3, div.5, div.7
{
// Odd Style here
}

div.2, div.4, div.6, div.8
{
// Even Style here
}

Не так красиво, но достаточно гибко, чтобы делать то, что вы просите.

Answer 4

CSS не имеет возможности выбора на основе имени класса, которое изменяется таким образом.

Существуют различные nth-селекторы, предложенные для CSS 3 , но поддержка браузера в настоящее время слабая.