Jump to content
  • 0

nth-child(2n) не работает


https
 Share

Question

<div class='d1>  <div class='d2'></div>  <div class='blabla'></div>  <div class='d2'></div></div>.d1 .d2:nth-child(2n){    float: right;}

изза дива blabla не  работает стиль, если убрать див blabla то работает. почему так и как исправить?

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0

Я формулировал вопрос в контексте темы. То есть, если у нас пример, как в первом сообщении, как сделать так, чтоб стили применялись к чётным или любым другим элементам заданным по формуле an+b, где n счётчик, при условии, что между элементами класса d2 могут вставляться произвольное количество прочих элементов?

Иными словами как сделать так, чтоб счётчик работал только для элементов, имеющих определённый атрибут или класс, а не для всех дочерних элементов d1?


Семён-семёныч (с)

Всё, вроде, понял... Сейчас попробую первый пример, с учётом сказанного решить.

Edited by Launder
Link to comment
Share on other sites

  • 0
div[class=d2]

WAAAAAAT????????

- srsly? noooooooo

- s-r-s-l-y? noo-o-o-o-o-o-o

 

http://jsfiddle.net/alexriz/t4dxgxdp/

 

Так будет работать только если все d2 изменить с div на другой тег (например span)
 

Да и с div будет все работать

Link to comment
Share on other sites

  • 0

 

div[class=d2]

WAAAAAAT????????

- srsly? noooooooo

- s-r-s-l-y? noo-o-o-o-o-o-o

 

http://jsfiddle.net/alexriz/t4dxgxdp/

 

Так будет работать только если все d2 изменить с div на другой тег (например span)

 

Да я, собственно, так извратился, потому, что не вполне понятно, почему вполне традиционная запись не работает:

 

http://jsfiddle.net/Launder/fqztyus5/

<div class='d1'>  <div class='d2'>Маша</div>  <div class='blabla'>Ела</div>  <div class='d2'>Кашу</div></div>.d1 .d2:nth-of-type(2n){    float: right;}
Edited by Launder
Link to comment
Share on other sites

  • 0

 

Да и с div будет все работать

 

 

Работает, но специфично:

 

http://jsfiddle.net/Launder/c80djdkL/

 

нечётными оказались 1, 2 и 4 строка элемента с классом "d2", 3я оказались чётным.

Почему?

Link to comment
Share on other sites

  • 0

http://jsfiddle.net/Launder/1257wyeL/1/

 

Оно вообще ведёт себя крайне странно: счёт начинает считать только когда список идёт подряд. Тогда он по заданной формуле применяет к нужным элементам определённые свойства.

Кстати, интересно ведёт себя и float интересно из какой логики образуются подобные лесенки?

Link to comment
Share on other sites

  • 0

Эти селекторы в целом ведут себя, как и остальные, когда браузер просматривает правила справа налево. То есть, если грубо, браузер сналача выбирает все четные элементы (2n), затем ищет пересечение с селектором .d2 и красит их в красный. Аналогично с другим правилом.

В общем, пока что с помощью CSS универсального способа нет. Возможно, вот это как раз то, что нужно. Но это пока только draft.

Link to comment
Share on other sites

  • 0

То есть, если грубо, браузер сналача выбирает все четные элементы (2n), затем ищет пересечение с селектором .d2 и красит их в красный.

 

Похоже что нет. Он начинает выбирать элементы по формуле an+b только если они идут подряд. Как только появляется элемент, скажем, с другим классом, счёт прерывается и далее когда браузер "встречает" новую группу элементов счётчик включается снова.

Edited by Launder
Link to comment
Share on other sites

  • 0

Да, похоже, Вы правы.

В общем, нужно либо через .d1 p отменять для <p> отступы (и вместо div class="blabla" оборачивать в <p>), либо оборачивать в span и назначать .d1 span {display: block} либо иную подобную заглушку...

Edited by Launder
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy