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

[https]

<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 то работает. почему так и как исправить?

[Great Rash]

.d1 div:nth-child(2n){

    float: right;

}

???

[sigma77]

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

Потому что он 3й потомок, а не 2й 

[Switch74]

css работает немного не так, как jquery

[Launder]

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

[lexxcode]

https://webref.ru/css/nth-of-type

[Launder]

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

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

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

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

Edited December 1, 2015 by Launder

[Launder]

Ну по идее должно работать что-то вроде:

.d1 div[class="d2"]:nth-of-type(2n){    float: right;}

Но не работает... Почему?

[web-tech]

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

http://jsfiddle.net/vadimkot/Lq3o4esf/

Edited December 1, 2015 by web-tech

[lexxcode]

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 будет все работать

[web-tech]

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

 

Конечно будет, но не так как нужно ТС.

[lexxcode]

то что там нужно ТС вообще слабо понятно)

[Launder]

 

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 December 1, 2015 by Launder

[Launder]

 

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

 

 

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

 

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

 

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

Почему?

[Launder]

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

 

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

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

[Igor Schnaider]

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

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

[Launder]

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

 

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

Edited December 1, 2015 by Launder

[Igor Schnaider]

счётчик включается снова

 

Нет :-)

[Launder]

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

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

Edited December 1, 2015 by Launder

[SelenIT]

Возможно, вот это как раз то, что нужно. Но это пока только draft.

Но, говорят, уже работает в Сафари 9.