Специальные селекторы: Структурные псевдоклассы.

  CSS псевдокласс позволяет определить элементы тегов не по формальному значению атрибута CLASS, а по положению этих элементов в контексте документа или по состоянию элементов, которое может изменяться в процессы общения пользователя с Web-страницей.
  Структурные псевдоклассы позволяют определить элементы тегов на основании отношений вложенности.

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

  • Основной селектор Структурный псевдокласс

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

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

Значения:

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

Значения:

  • :first-child - Определяются элементы тегов, которые являются первыми (в HTML коде) на своем уровне "дочерними" элементами элемента тега, определенного основным селектором и всех его "дочерних" элементов на всех уровнях вложенности.
  • :first-of-type - Определяются элементы тегов, которые являются первыми (в HTML коде) в каждой группе "дочерних" элементов с одинаковым именем тега на своем уровне.
      Такие группы выделяются на всех уровнях вложенности в элемент тега, определенный основным селектором.
  • :last-child - Определяются элементы тегов, которые являются последними (в HTML коде) на своем уровне "дочерними" элементами элемента тега, определенного основным селектором и всех его "дочерних" элементов на всех уровнях вложенности.
  • :last-of-type - Определяются элементы тегов, которые являются последними (в HTML коде) в каждой группе "дочерних" элементов с одинаковым именем тега на своем уровне.
      Такие группы выделяются на всех уровнях вложенности в элемент тега, определенный основным селектором.
  • :only-child - Определяются элементы тегов, которые являются единственными на своем уровне "дочерними" элементами элемента тега, определенного основным селектором и всех его "дочерних" элементов на всех уровнях вложенности.
  • :only-of-type - Определяются элементы тегов, которые являются единственными (в HTML коде) в каждой группе "дочерних" элементов с одинаковым именем тега на своем уровне (группа из одного элемента).
      Такие группы выделяются на всех уровнях вложенности в элемент тега, определенный основным селектором.
  • :nth-child(an+b|odd|even|число) - Определяются элементы тегов, которые являются "дочерними" элементами элемента тега, определенного основным селектором и всех его "дочерних" элементов на всех уровнях вложенности.
      Местоположение (в HTML коде) таких элементов на своем уровне задается выражением an+b|odd|even|число, если считать "слева - направо".
  • :nth-of-type(an+b|odd|even|число) - Определяются элементы тегов, которые являются "дочерними" элементами элемента тега, определенного основным селектором и всех его "дочерних" элементов на всех уровнях вложенности.
      Местоположение (в HTML коде) таких элементов на своем уровне задается выражением an+b|odd|even|число, если считать "слева - направо", однако считаются не все элементы уровня, а лишь элементы, входящие в группы с одинаковым именем тега.
      В каждой такой группе выбираются элементы с соответствующим местоположением именно в ней.
  • :nth-last-child(an+b|odd|even|число) - Определяются элементы тегов, которые являются "дочерними" элементами элемента тега, определенного основным селектором и всех его "дочерних" элементов на всех уровнях вложенности.
      Местоположение (в HTML коде) таких элементов на своем уровне задается выражением an+b|odd|even|число, если считать "справа - налево".
  • :nth-last-of-type(an+b|odd|even|число) - Определяются элементы тегов, которые являются "дочерними" элементами элемента тега, определенного основным селектором и всех его "дочерних" элементов на всех уровнях вложенности.
      Местоположение (в HTML коде) таких элементов на своем уровне задается выражением an+b|odd|even|число, если считать "справа - налево", однако считаются не все элементы уровня, а лишь элементы входящие в группы с одинаковым именем тега.
      В каждой такой группе выбираются элементы с соответствующим местоположением именно в ней.

  Алгоритм определения элемента тега специальным селектором структурных псевдоклассов по заданной формуле - an+b|odd|even|число:
  1. a и b - Любые целые числа определяющие положение необходимых элементов.
  2. n - Обозначение счетчика. Кодируется как указано
  3. Браузер в каждом уровне работает с группами элементов тегов, которые возможно будут выбраны. Такая группа может быть либо одна (child), либо несколько - по количеству имен тегов формирующих элементы уровня (of-type) Нумерация элементов в каждой группе происходит согласно HTML-коду "слева - направо" или "справа - налево" (last).
  4. Браузер последовательно подставляет в формулу целые значения n от 0 и до тех пор пока вся группа элементов не будет исчерпана. Значение формулы для каждого n - это и будет номер выбранного элемента. Нулевое значение не считается.
  5. odd - Определяются только четные элементы в группе.
  6. even - Определяются только нечетные элементы в группе.
  7. число - Определяются элементы с порядковым номером в группе равным этому значению.

В примерах основным селектором является элемент тега UL:

Пример структурного псевдокласса :first-child - наведите мышку.
  • Элемент тега LI - 1й дочерний основного селектора и 1й в уровне с таким же именем тега.
  • Элемент тега LI - 2й дочерний основного селектора и 2й в уровне с таким же именем тега. Элемент тега B - 1й дочерний 2го дочернего основного селектора и 1й в уровне с таким же именем тега. Элемент тега B - 2й дочерний 2го дочернего основного селектора и 2й в уровне с таким же именем тега.
  • Элемент тега LI - 3й дочерний основного селектора и 3й в уровне с таким же именем тега. Элемент тега Q - 1й дочерний 3го дочернего основного селектора, и 1й в уровне с таким именем тега.. Элемент тега B - 2й дочерний 3го дочернего основного селектора но 1й в уровне с таким же именем тега.
Пример структурного псевдокласса :first-of-type - наведите мышку.
  • Элемент тега LI - 1й дочерний основного селектора и 1й в уровне с таким же именем тега.
  • Элемент тега LI - 2й дочерний основного селектора и 2й в уровне с таким же именем тега. Элемент тега B - 1й дочерний 2го дочернего основного селектора и 1й в уровне с таким же именем тега. Элемент тега B - 2й дочерний 2го дочернего основного селектора и 2й в уровне с таким же именем тега.
  • Элемент тега LI - 3й дочерний основного селектора и 3й в уровне с таким же именем тега. Элемент тега Q - 1й дочерний 3го дочернего основного селектора, 1й в уровне с таким именем тега.. Элемент тега B - 2й дочерний 3го дочернего основного селектора но 1й в уровне с таким же именем тега.
Пример структурного псевдокласса :nth-child(3n+1) - наведите мышку.
  • Элемент тега LI - 1й дочерний основного селектора и 1й в уровне с таким же именем тега.
  • Элемент тега LI - 2й дочерний основного селектора и 2й в уровне с таким же именем тега. Элемент тега B - 1й дочерний 2го дочернего основного селектора и 1й в уровне с таким же именем тега. Элемент тега Q - 2й дочерний 3го дочернего основного селектора, и 1й в уровне с таким именем тега. Элемент тега B - 3й дочерний 2го дочернего основного селектора и 2й в уровне с таким же именем тега. Элемент тега Q - 4й дочерний 3го дочернего основного селектора, и 2й в уровне с таким именем тега. Элемент тега B - 5й дочерний 2го дочернего основного селектора и 3й в уровне с таким же именем тега. Элемент тега Q - 6й дочерний 3го дочернего основного селектора, и 3й в уровне с таким именем тега. Элемент тега B - 7й дочерний 2го дочернего основного селектора и 4й в уровне с таким же именем тега.
  • Элемент тега LI - 3й дочерний основного селектора и 3й в уровне с таким же именем тега.
  • Элемент тега LI - 4й дочерний основного селектора и 4й в уровне с таким же именем тега.
  • Элемент тега LI - 5й дочерний основного селектора и 5й в уровне с таким же именем тега.
  • Элемент тега LI - 6й дочерний основного селектора и 6й в уровне с таким же именем тега.
  • Элемент тега LI - 7й дочерний основного селектора и 7й в уровне с таким же именем тега.
Пример структурного псевдокласса :nth-of-type(3n+1) - наведите мышку.
  • Элемент тега LI - 1й дочерний основного селектора и 1й в уровне с таким же именем тега.
  • Элемент тега LI - 2й дочерний основного селектора и 2й в уровне с таким же именем тега. Элемент тега B - 1й дочерний 2го дочернего основного селектора и 1й в уровне с таким же именем тега. Элемент тега Q - 2й дочерний 3го дочернего основного селектора, и 1й в уровне с таким именем тега.. Элемент тега B - 3й дочерний 2го дочернего основного селектора и 2й в уровне с таким же именем тега. Элемент тега Q - 4й дочерний 3го дочернего основного селектора, и 2й в уровне с таким именем тега.. Элемент тега B - 5й дочерний 2го дочернего основного селектора и 3й в уровне с таким же именем тега. Элемент тега Q - 6й дочерний 3го дочернего основного селектора, и 3й в уровне с таким именем тега. Элемент тега B - 7й дочерний 2го дочернего основного селектора и 4й в уровне с таким же именем тега.
  • Элемент тега LI - 3й дочерний основного селектора и 3й в уровне с таким же именем тега.
  • Элемент тега LI - 4й дочерний основного селектора и 4й в уровне с таким же именем тега.
  • Элемент тега LI - 5й дочерний основного селектора и 5й в уровне с таким же именем тега.
  • Элемент тега LI - 6й дочерний основного селектора и 6й в уровне с таким же именем тега.
  • Элемент тега LI - 7й дочерний основного селектора и 7й в уровне с таким же именем тега.