Специальные селекторы: Комбинаторы.

  Комбинаторы - позволяют определить элементы тегов на основании их местоположения в HTML коде (не только вложенности) относительно других элементов тегов.

Формат записи в коде CSS специального селектора комбинатора:

  • Основной селектор Комбинатор Селектор выбора

Значения формата записи:

  Основной селектор - Устанавливает элемент тега, относительно которого, по условию комбинатора, определяются элементы тегов заданные селектором выбора.

Значения:

  Комбинатор - Устанавливает условие местоположения элементов тегов, определенных селектором выбора, относительно элемента тега, определенного основным селектором.

Значения:

  Селектор выбора - Устанавливает конечные элементы тегов для выбора по условию заданному комбинатором.

Значения:


В примерах основным селектором определяется первый элемент тега LI в списке:
Пример комбинатора + - наведите мышку.
<STYLE>
  .ul1 UL LI {max-width: 600px; font-size: smaller; background-color: #F5F5F5 }
  .ul1:hover UL .li1 + .xxx {background-color: #FFD700 }
</STYLE>
........

<FIELDSET class="ul1">
  <UL>
    <LI class="li1">
      Элемент тега LI первой строки списка.
      <B class="xxx">Элемент тега B - дочерний первой строки списка.</B>
      <I><S class="xxx">Элемент тега S - дочерний на втором уровне первой
      строки списка.
</S></I>
    </LI>
    <LI class="xxx">
      Элемент тега LI второй строки списка.
    </LI>
    <LI class="xxx">
      Элемент тега LI третьей строки списка.
    </LI>
  </UL>
</FIELDSET>
  • Элемент тега LI первой строки списка. Элемент тега B - дочерний первой строки списка. Элемент тега S - дочерний на втором уровне первой строки списка.
  • Элемент тега LI второй строки списка.
  • Элемент тега LI третьей строки списка.

Пример комбинатора ~ - наведите мышку.
<STYLE>
  .ul1 UL LI {max-width: 600px; font-size: smaller; background-color: #F5F5F5 }
  .ul1:hover UL .li1 ~ .xxx {background-color: #FFD700 }
</STYLE>
........

<FIELDSET class="ul1">
  <UL>
    <LI class="li1">
      Элемент тега LI первой строки списка.
      <B class="xxx">Элемент тега B - дочерний первой строки списка.</B>
      <I><S class="xxx">Элемент тега S - дочерний на втором уровне первой
      строки списка.
</S></I>
    </LI>
    <LI class="xxx">
      Элемент тега LI второй строки списка.
    </LI>
    <LI class="xxx">
      Элемент тега LI третьей строки списка.
    </LI>
  </UL>
</FIELDSET>
  • Элемент тега LI первой строки списка. Элемент тега B - дочерний первой строки списка. Элемент тега S - дочерний на втором уровне первой строки списка.
  • Элемент тега LI второй строки списка.
  • Элемент тега LI третьей строки списка.

Пример комбинатора (пробел) - наведите мышку.
<STYLE>
  .ul1 UL LI {max-width: 600px; font-size: smaller; background-color: #F5F5F5 }
  .ul1:hover UL .li1 .xxx {background-color: #FFD700 }
</STYLE>
........

<FIELDSET class="ul1">
  <UL>
    <LI class="li1">
      Элемент тега LI первой строки списка.
      <B class="xxx">Элемент тега B - дочерний первой строки списка.</B>
      <I><S class="xxx">Элемент тега S - дочерний на втором уровне первой
      строки списка.
</S></I>
    </LI>
    <LI class="xxx">
      Элемент тега LI второй строки списка.
    </LI>
    <LI class="xxx">
      Элемент тега LI третьей строки списка.
    </LI>
  </UL>
</FIELDSET>
  • Элемент тега LI первой строки списка. Элемент тега B - дочерний первой строки списка. Элемент тега S - дочерний на втором уровне первой строки списка.
  • Элемент тега LI второй строки списка.
  • Элемент тега LI третьей строки списка.

Пример комбинатора > - наведите мышку.
<STYLE>
  .ul1 UL LI {max-width: 600px; font-size: smaller; background-color: #F5F5F5 }
  .ul1:hover UL .li1 > .xxx {background-color: #FFD700 }
</STYLE>
........

<FIELDSET class="ul1">
  <UL>
    <LI class="li1">
      Элемент тега LI первой строки списка.
      <B class="xxx">Элемент тега B - дочерний первой строки списка.</B>
      <I><S class="xxx">Элемент тега S - дочерний на втором уровне первой
      строки списка.
</S></I>
    </LI>
    <LI class="xxx">
      Элемент тега LI второй строки списка.
    </LI>
    <LI class="xxx">
      Элемент тега LI третьей строки списка.
    </LI>
  </UL>
</FIELDSET>
  • Элемент тега LI первой строки списка. Элемент тега B - дочерний первой строки списка. Элемент тега S - дочерний на втором уровне первой строки списка.
  • Элемент тега LI второй строки списка.
  • Элемент тега LI третьей строки списка.