:first-child не всегда работает

[logicface]

Всем привет, столкнулся с проблемой что не всегда работает :first-child для блоков, к примеру есть 3 блока в диве, ферст чилд для них не пашет а ласт чилд пашет, в чем прикол?

[klierik]

может быть в коде присутствует или

1. условный комментарий <!-- comment -->

2. тег <script>

[logicface]

Нет, ничего не было, просто 3 дива. У каждого дива к пример класс lol. И если писать .lol:first-child {что то там} ничего не пашет, хотя последний чилд работает. По ходу чилдами можно управлять нормально только из родительского блока, то есть надо типо что бы это .lol были обернуты в div и писать div .lol:first-child

Ничего не понимаю, вот тут все пашет: http://jsfiddle.net/3k9VP/1/

Я тупо копирую это дело себе, и у меня первый блок все равно розовый.=D

 

Короче вообще ппц, я удалил весь css с сайта кроме этого и блоки все равно не работают, они начинают работать только если я удалю вообще все кроме них.=\

Ага, еще одно, так же они работают без всякого удаления и тому подобного но если только их обрамить еще одним дивом. То есть не надо css менять, странно это.

 

Вот! Я нашел! Объясните мне плиз почему это не работает http://jsfiddle.net/3k9VP/2/

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

Edited July 13, 2014 by logicface

[Veseloff]

Вот! Я нашел! Объясните мне плиз почему это не работает http://jsfiddle.net/3k9VP/2/ Ведь я явно указал классом, какие дивы принимают участие в первый-последний.

Первый лол не является «first-child», так как первым потомком является нигггер.

[logicface]

 

Вот! Я нашел! Объясните мне плиз почему это не работает http://jsfiddle.net/3k9VP/2/ Ведь я явно указал классом, какие дивы принимают участие в первый-последний.

Первый лол не является «first-child», так как первым потомком является нигггер.

 

Спасибо, но все равно странновато это. Например если ниггер будет не div'ом а span'ом тоже работать не будет. Я думал что потомки как бы разделяются на классы. То есть див - это одно племя грубо говоря, спаны - другое племя.) А если див имеет еще класс какой то, то он вообще из 4 племени.=D

[Николя223]

Почитай, тут помоему куча вопросв таких было.

некотрые селекторы в css вообще странновато работают.

Здесь происходит сравнение. 

Если элемент имеет класс - lol и он первый в списке, то к нему применяется стиль

названия тегов тут не причем, также как племена, родня, санта барбара и Кристофер Робин

[klierik]

:first-child -- это обращение к первому дочернему элементу

 

вот визуальный набросок: http://jsfiddle.net/3k9VP/3/

[Switch74]

интересный вопрос http://jsfiddle.net/3k9VP/4/

 

если :first-child - это обращение к первому дочернему элементу, то логичнее было бы сделать .wrapper:first-child чтобы получить первый его дочерний элемент в не зависимости от того, какой tag, class или id

 

но мы пишем .box:first-child и получаем первый .box причем только если он реально первый потомок среди всех остальных

 

исходя из того, как работает :nth-child для .box и .box1, если ему выставлять 1-5 получается:

берется родитель элемента с классом .box и уже относительно родителя берется дочерний элемент с номером, если у этого элемента не тот tag,class или id, который мы писали в селекторе, то правила не применяются.

Edited July 14, 2014 by Switch74

[SelenIT]

Псевдокласс — как класс. .box.lol — элемент, имеющий классы "box" и "lol" одновременно. .box:first-child — элемент, одновременно отвечающий селекторам .box и :first-child, т.е. имеющий класс "box" и при этом являющийся первым потомком родителя.

Для разных тегов можно пользоваться :nth-of-type. Для разных классов пока, к сожалению, ничего нет. В CSS Selectors 4 предлагали nth-match, потом вместо него решили расширить nth-child до nth-child(an + b of <селектор>). Но пока, насколькл я в курсе, нигде не поддерживается.

[Николя223]

лучше бы они делали по подобию jQuery - first и last

Edited July 14, 2014 by Николя223

[Switch74]

Псевдокласс — как класс. .box.lol — элемент, имеющий классы "box" и "lol" одновременно. .box:first-child — элемент, одновременно отвечающий селекторам .box и :first-child, т.е. имеющий класс "box" и при этом являющийся первым потомком родителя.

Проблема ограниченности :first-child возникает в том, что его нужно использовать в комплекте с каким-либо параметром. Не зна параметров первого элемента tag, class, id, name мы не сможем к нему обратиться и это печалька.

[Николя223]

нууу .... http://jsfiddle.net/LW5kU/

[logicface]

Что бы оно пахало, выходит, надо по любому оборачивать спаны в лишний див:

http://jsfiddle.net/LW5kU/1/

Edited July 15, 2014 by logicface

[Switch74]

ну так что-то у вас пахать будет в любом случае как минимум в body

2Николя223 - идея интересная, спс

[Aleksandr.L]

Что бы оно пахало, выходит, надо по любому оборачивать спаны в лишний див:

http://jsfiddle.net/LW5kU/1/

 

last-of-type для этого подходит: http://jsfiddle.net/LW5kU/2/

[SelenIT]

Не зна параметров первого элемента tag, class, id, name мы не сможем к нему обратиться и это печалька.

Как раз наоборот. Мы можем обратиться к первому по номеру потомку в DOM-дереве, независимо от его параметров, но не можем (пока) обратиться к первому из элементов, удовлетворяющих определенному условию (напр. с определенным классом). Максимум, что есть — возможность считать отдельно разные теги (nth-*-of-type).