Селекторы в CSS

[davell]

Доброго времени суток!

Если не сложно не могли бы Вы объяснить работу селекторов на простом примере и дать рекомендации по работе с ними.

Предположим есть HTML код:

<ul class="label1">
  <li class="text1">
  <li class="text2">
  <ul class="label2">
    <li class="text3"></li>
  </ul>
  </li>
</ul>

если мы запишем CSS код:

ul + li {
/* произвольный стиль */
}

то к text1 и к text3 будет применен произвольный стиль т.к. они стоят сразу после ul,

а как понять следующие случаи:

ul > li + li {
/* произвольный стиль */
}

и

li + ul > li {
/* произвольный стиль */
}

???

Очень надеюсь, что Вы поможете разобраться.

[DStereo]

Доброго времени суток!

Если не сложно не могли бы Вы объяснить работу селекторов на простом примере и дать рекомендации по работе с ними.

Предположим есть HTML код:

<ul class="label1">
  <li class="text1">
  <li class="text2">
  <ul class="label2">
    <li class="text3"></li>
  </ul>
  </li>
</ul>

если мы запишем CSS код:

ul + li {
/* произвольный стиль */
}

то к text1 и к text3 будет применен произвольный стиль т.к. они стоят сразу после ul,

а как понять следующие случаи:

ul > li + li {
/* произвольный стиль */
}

и

li + ul > li {
/* произвольный стиль */
}

???

Очень надеюсь, что Вы поможете разобраться.

Я немного отформатировал вашу структуру, чтобы было более наглядно. Так вот, допустим у нас есть вот такая структура:

?<ul class="list1">
    <li class="text1">Text1</li>
    <li class="text2">
        Text2
        <ul class="list2">
            <li class="subtext1">Subtext1</li>
            <li class="subtext2">Subtext2</li>
        </ul>
    </li>
</ul>?

Вот такой селектор:

ul + li

не приводит ни к чему, так как "+" является селектором соседних элементов.

Так как ul не является соседом для li, а является либо родителем (list1) или потомком (list2), то ничего не произойдет.

Другая ситуация:

ul > li + li

добавляет стили для text2 и subtext2.

Так как селекторы браузерами читаются справа налево, то получается сначала что браузер выбирает все элементы li (text1,text2,subtext1,subtext2), потом выбирает второй элемент li (text2,subtext2), а потом выбирает из уже выбранных элементы li, которые являются непосредственными потомками для ul, т.е. вложены в ul на первом уровне. Для list1 - это text2, а для list2 - это subtext2. Но так как тут выбираются все ul (list1,list2), а не конкретный list1 или list2, то стили применяются для text2 и для subtext2.

Если бы был вот такой селектор:

.list1 > li + li

то стили бы применились только для text2.

Edited February 22, 2012 by DStereo

[davell]

DStereo Спасибо за подробное объяснение!

Надеюсь в дальнейшем проблем с ними не возникнет

[ShootingStar]

.list1 > li + li

то стили бы применились только для text1.

Тут я с вами поспорю, стиль применятся ко всем соседним li (кроме .text1) которые являются детьми .list

Пример: http://jsfiddle.net/ShootingStar/6NaVG/

Edited February 22, 2012 by ShootingStar

[DStereo]

.list1 > li + li

то стили бы применились только для text1.

Тут я с вами поспорю, стили применятся ко всем соседним li (кроме .text1) которые являются детьми .list

http://jsfiddle.net/ShootingStar/6NaVG/

Свойство color наследуется, поэтому для всех потомков .text2, цвет текста тоже будет красный. А потомками для .text2 являются list2, subtext1, subtext2. Попробуйте задать ненаследуемое свойство, такое как border и увидите сами, что произойдет.

[ShootingStar]

.list1 > li + li

то стили бы применились только для text1.

Тут я с вами поспорю, стили применятся ко всем соседним li (кроме .text1) которые являются детьми .listhttp://jsfiddle.net/ShootingStar/6NaVG/

Свойство color наследуется, поэтому для всех потомков .text2, цвет текста тоже будет красный. А потомками для .text2 являются list2, subtext1, subtext2. Попробуйте задать ненаследуемое свойство, такое как border и увидите сами, что произойдет.

http://jsfiddle.net/ShootingStar/6NaVG/1/ , .text1 все равно не при делах.

[DStereo]

http://jsfiddle.net/ShootingStar/6NaVG/1/ , .text1 все равно не при делах.

Прошу прощения, там опечатка, я имел в виду text2, а не text1.

Edited February 22, 2012 by DStereo

[davell]

А вот кстати интересно, в связи с опечаткой назрел вопрос:

А можно ли придумать какой ни будь финт и заставить:

.list1 > li + li

быть примененным к text1

вот этот вариант не интересен

.list1 > li

а что то вроде условия, что применяем стили к text1 если он является потомком .list1 и за ним следует li

[DStereo]

А вот кстати интересно, в связи с опечаткой назрел вопрос:

А можно ли придумать какой ни будь финт и заставить:

.list1 > li + li

быть примененным к text1

вот этот вариант не интересен

.list1 > li

а что то вроде условия, что применяем стили к text1 если он является потомком .list1 и за ним следует li

Я думаю, что в таком случае подойдут селекторы типа :nth-child(n) и nth-of-type(n), но они не работают для ie ниже 9 версии. Да и вряд ли на практике возникнет такая ситуация, когда нужно применить стили только если у элемента есть соседи следующие за ним, разве что только для эксперимента. Но вообще на javascript такое можно реализовать.

Edited February 24, 2012 by DStereo