Как с помощью nth-child выбрать каждый третий div, но div заключён в тег «a»?

Question

[MaxFreedom]

Привет! Ребята подскажите как сделать каждый третий div с красным фоном. В первом случае всё получается, но стоит обрамить div ссылкой и всё рушится.

<div id="main">
     <a href="#"><div class="nomain">1</div></a>
     <a href="#"><div class="nomain">1</div></a>
     <a href="#"><div class="nomain">1</div></a>
</div>

К сожалению #main:nth-child(3n){background: red;} не помогает(( А если убрать тег , то всё работает.

Comments

[Anton Kuzmichev]

:nth-child применяется напрямую к элементам (а не к контейнеру, их содержащему, как у вас), с которыми вы хотите работать, в вашем случае - надо применять к <a>, так как ссылки являются непосредственными дочерними узлами в #main.

Answer 1

[Astrohas]

#main a:nth-child(3n) div{background: red;}
пруфы
тока нехорошо совать блочные элементы в строчные

Comments

[wbrapist]

Ну раз подправили, то я спрошу: а почему нехорошо?

[Ankhena]

тока нехорошо совать блочные элементы в строчные

спецификация HTML5 позволяет div складывать в a, дальше вопрос стилей.

[Astrohas]

wbrapist, явное лучше неявного

[MaxFreedom]

Ваш ответ помог!! Огромное спасибо!!

[wbrapist]

Хасан Истамкулов, как раз-таки div в a более явно, чем наоборот.

[Astrohas]

wbrapist, а вас не смущают блоки-ссылки?

[wbrapist]

Хасан Истамкулов, а должны? Поясните, пожалуйста.

[Astrohas]

wbrapist, нда. Просто обычно div не суют в a. Обычно а суют в контейнер, а не наоборот.

[wbrapist]

Хасан Истамкулов, так раньше было что ли и вы не можете смириться с тем, что что-то происходит не по вашим консерваторским соображениям?

Я просто не понимаю конкретно выражения: "нехорошо совать блочные элементы в строчные".

[Astrohas]

wbrapist, для блоков внутри a обычно используют span, а решение с div выглядит уродливо.
Это лично мое мнение, вы же можете совать что угодно и куда угодно

[Ankhena]

Хасан Истамкулов, что во что "сувать" зависит от надобностей по макету. В абстрактном случае для a уже можно задать все необходимые свойства.
А в реальной жизни чаще комбинации li>a или a>span.

[Сергей delphinpro]

Хасан Истамкулов, Не спорьте, лучше перечитайте спеку.
Внутри ссылки допустим почти любой контент, кроме другой ссылки, формы, медиатегов и т.п. Подробности в спеке )

[Astrohas]

Сергей,

Это лично мое мнение,

[Сергей delphinpro]

Хасан Истамкулов, нет. вы пишете
"для блоков внутри a обычно используют span"
используют
вы не написали я использую
это уже не ваше личное мнение, а мнение сообщества. и это не соответствует действительности. сообщество придерживается официальной спецификации.

[Astrohas]

Сергей, хорошо ваша взяла

Answer 2

[Андрей]

css.yoksel.ru/nth-child