Стиль каждого третьего элемента?

Ответ 1

Это возможно с помощью чистого CSS. Нет необходимости в javascript.

Используйте селектор nth-child. ¹

section > div:nth-child(3n+1) {
    background:red;
}

Где '1', где начинается стиль, и 3 указывает, что он должен стилизовать каждый третий элемент. Это объясняется намного лучше здесь.

jsFiddle здесь.

¹ _{Примечание. Как отметили другие люди, это не поддерживается полностью IE8 и вниз.суб >}

Ответ 2

Поддержка IE через библиотеки

Если это поддержка IE, которую вы ищете, есть замечательная библиотека под названием Selectivzr, которая позволяет селекторам CSS3 в IE версии 6-8.

Hack, который не помогает IE, но выполняется без использования: nth-child

В противном случае все, что я могу предложить, - уродливый взломать с помощью селектора + смежного севера (определяется стандартами CSS2, но недоступен по умолчанию в IE8 или ниже)

div {
    width: 40px;
    height: 40px;
    background-color: blue;
}

div + div,
div + div + div + div + div { width: 100px }

div + div + div + div,
div + div + div + div + div + div + div { width: 40px }

JSFiddle

Этот шаблон может быть сгенерирован с большинством предварительных компиляторов CSS (т.е. SASS), но ограничен количеством элементов, которые вы хотите иметь.

Заключение

Если вы ищете поддержку IE; то я настоятельно рекомендую использовать библиотеку, такую ​​как Selectivzr. Это избавит вас от некоторых головных болей IE6-8.

Если у меня есть какие-то прозрения в отношении лучшего решения, я отправлю.

Ответ 3

section div:nth-child(3n+3) {  
    color: #ccc;
}

выбранные элементы:

(3xn)+3 :
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

вы можете прочитать его следующим образом:

(выберите весь третий элемент), начиная с 3

здесь у вас есть все, что вам нужно, чтобы DEMO

http://css-tricks.com/examples/nth-child-tester/

подробнее здесь http://css-tricks.com/useful-nth-child-recipies/

http://css-tricks.com/how-nth-child-works/

Выбрать только четное или четное:

section div:nth-child(odd) {

}

section div:nth-child(even) {

    }

Выберите только первую пятерку

div:nth-child(-n+5) {

}

Ответ 4

Чистый CSS, без Javascript, с поддержкой IE7/8

Требуется изменение HTML или...

Вы должны явно указать какой-либо класс на элементы, которые вы хотите изменить в своем HTML, независимо от того, динамически ли они подсчитываются на стороне сервера script или вручную жестким кодированием.

Демо-скрипт

HTML

<section>
  <div class="someclass explicitClass"></div>
  <div id="someId"></div>
  <div class="someotherclass"></div>
  <div id="someotherId" class="explicitClass"></div>
  <div class="someclass"></div>
  <div id="someId"></div>
  <div class="someotherclass explicitClass"></div>   
</section>

CSS

.explicitClass {
    your-property-to-change: your-value-desired;
}

... Требуется обширная разметка CSS

Или вы должны генерировать CSS, который "подсчет" для вас громоздким способом. Как заметил Инди в своем ответе (не уверен, почему он заявил, что смежный брат не доступен по умолчанию в IE8 или ниже, "как это неверно), это можно было бы обработать через препроцессор CSS, но даже тогда вы действительно не хотите идти по этому маршруту, если у вас нет очень ограниченного количества элементов, вероятно, не более того, что вы разместили для своего примера. Если бы было сотни элементов, это не практично. Это решение не требует изменений в вашем HTML.

DEMO Fiddle

CSS

section div:first-child,
section div:first-child + div + div + div,
section div:first-child + div + div + div + div + div + div {
    your-property-to-change: your-value-desired;
}

В конечном счете, я согласен с JoshC и Indy

Я предложил вышеприведенные ответы, чтобы показать, что вы должны делать, если вы действительно хотите, что хотите сказать. Если бы это был я, если бы не было абсолютно жизненно важно иметь эти изменения стилей на каждом третьем элементе (поэтому отключенный javascript является фатальным для всей схемы, и даже это можно было бы обработать для рестайла для не-javascript), я бы использовал JoshC отвечает как ваш CSS, а затем использует некоторую форму javascript-решения, чтобы сделать его обратно совместимым (как заметил Инди или любая другая форма решения javascript).

Ответ 5

вы можете использовать

.my-class:nth-child(odd) {}

или

.my-class:nth-child(2n+1) {}

Ответ 6

section > div:nth-child(3n+1) {
    background:red;
}

Этот стиль хорош для исправления вашей проблемы, но " > " этот символ не поддерживается для старых браузеров, например: IE5, IE6, IE7.,.

Но я предпочитаю этот способ, без символа ' > '

section div:nth-child(3n+1) {
    background:red;
}

Ответ 7

Возможное решение

section div:nth-child(3n+1) {  
    color: #ccc;
}

Приведенный выше код стилирует каждый третий элемент, начиная с первого элемента по запросу.
Измените число после "+ знак" , чтобы установить начальный элемент.
Измените число до n charecter, чтобы установить элементы после стилизации

Ответ 8

С чистым css это можно легко сделать. Вы можете определить CSS Selector и изменить требуемое дочернее свойство. Для вашего случая ниже подходит.

section > div:nth-child(3n+1) {
    background: green;
}

Как это работает.

Псевдоэлементы и псевдоклассы

Здесь выше работают, как показано ниже

if n = 0 then 3*0 + 1 = 1
if n = 1 then 3*1 + 1 = 4
if n = 2 then 3*2 + 1 = 7
if n = 3 then 3*3 + 1 = 10
...........

Если вам нужен каждый третий элемент, ваш css выглядит как

section > div:nth-child(3n+3) {
    background: green;
}

Здесь выше работают, как показано ниже

if n = 0 then 3*0 + 3 = 3
if n = 1 then 3*1 + 3 = 6
if n = 2 then 3*2 + 3 = 9
if n = 3 then 3*3 + 3 = 12
...........