• Страница 1 из 1
  • 1
Форум » III. HTML и CSS » Базовые основы CSS » Дочерние селекторы (Форматирование вложенных элементов)
Дочерние селекторы
1 В общем виде, вложенные элементы можно форматировать, используя дочерний селектор

Цитата
Код
body > h1

выбирает заголовок первого уровня, являющийся дочерним для body


Дочерний селектор, в отличие от селектора потомков, позволяет определить конкретные родительский и дочерний элементы.

Чтобы понять разницу, рассмотрим код:

Код
<body>
<h1>Заголовок 1-го уровня</h1>
  <div>
    <h1>Заголовок 1-го уровня</h1>
  </div>
</body>


Если мы используем селектор потомков:

Код
body h1


то таким образом мы выберем оба заголовка h1, поскольку они оба вложены внутрь body.

но если мы используем дочерний селектор:

Код
body > h1


то выберем только первый заголовок, поскольку только он является дочерним к body, а второй заголовок h1 является дочерним для div

Таким образом, если нам нужно выбрать только второй заголовок h1, мы можем написать так:

Код
div > h1

Изменить / Удалить

2 Псевдоклассы для выбора дочерних элементов

Дочерний элемент - это элемент, непосредственно заключённый в другой элемент.

Псевдоэлемент :first-child - позволяет выбрать и форматировать только первый дочерний элемент, независимо от того, сколько их будет в родительском элементе.
Например, в коде:

Код
<h1>Заголовок первого уровня</h1>
<h1>Заголовок первого уровня</h1>


выберем первый заголовок h1:

Код
h1:first-child {
  color: grey;
}


Но! Внимание! Рассмотрим такой код:

Код
<body>
  <h1>Заголовок 1-го уровня</h1>
    <div>
      <h1>Заголовок 1-го уровня</h1>
    </div>
</body>


Здесь два элемента h1, но один является дочерним для body, тогда как другой - дочерним для div.
Поэтому, если мы решим выбрать первый дочерний элемент у родительского, как мы это делали выше:

Код
h1:first-child {
  color: grey;
}


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

Изменить / Удалить

3 Псевдоэлемент :last-child - выбирает последний дочерний элемент.

Псевдоэлемент :only-child - выбирает элемент, который является единственным дочерним элементом для родительского.
Пример:

Код
p:only-child {
  color: red;
}


Например, если в родительском блоке div будет три абзаца, либо абзац и еще, к примеру, элемент ul, то текст абзаца не будет красного цвета, поскольку он не единственный дочерний элемент у блока div

Изменить / Удалить

4 Комплексный селектор :nth-child

С его помощью можно выбирать определённые дочерние элементы. С помощью ключевых слов можно также выбирать либо нечётные, либо чётные дочерние элементы:



Цитата
Код
tr:nth-child(odd) {
  background-color: #D9F0FF;
}

выберет все нечётные дочерние элементы




Цитата
Код
tr:nth-child(even) {
  background-color: #D9F0FF;
}

выберет все чётные дочерние элементы.


Если нужно выбрать конкретный дочерний элемент, используется его номер. Например, чтобы выбрать пятый элемент в таблице:



Код
tr:nth-child(5)


а если вы хотите, к примеру, выбрать каждый третий элемент списка, то используйте еще и множитель n:

Код
tr:nth-child(3n)


читается: выбрать каждый третий дочерний элемент, начиная с третьей строки. Наглядный пример работы:



Код
tr:nth-child(3n) {
  background-color: #81B2F2;
  color: #ffffff;
}


выбирается каждая третья строка, начиная с третьей.

Если нужно выделить каждую третью строку, но, к примеру, начиная со второй, то запись делается так:

Код
tr:nth-child(3n + 2) {
  background-color: #81B2F2;
  color: #ffffff;
}


в итоге получаем:

Изменить / Удалить

5 Для множителя n можно использовать также отрицательные значения, в этом случае будет произведён выбор всех предшествующих дочерних элементов в обратном порядке.
Например, запись:

Код
tr:nth-child(-n + 3) {
  background-color: #81B2F2;
  color: #ffffff;
}


означает начать с третьего элемента и выбрать каждый предшествующий ему элемент. Смотрим:

Изменить / Удалить

6 Дочерние псевдоклассы

:first-of-type - работает аналогично :first-child, применяется к первому дочернему элементу, но определённого типа.
Например, в блоке div с классом .sidebar есть несколько абзацев с текстом:

Код
<div class = 'sidebar'>
  <p>Здесь какой-то произвольный текст</p>
  <p>Здесь какой-то произвольный текст</p>
  <p>Здесь какой-то произвольный текст</p>
</div>


Чтобы выбрать и отформатировать первый абзац, нужно сделать так:

Код
.sidebar p:first-of-type {
  color: red;
}


:last-of-type - работает аналогично :last-child, применимо к последнему дочернему элементу, но определённого типа

:nth-of-type - работает аналогично :nth-child(), но применяется к чередующимся дочерним элементам определённого типа.
Где применимо? Например, в тексте, где содержится много изображений, можно чередовать их вывод слева и справа:

Код
img:nth-of-type(odd) {
  float: left;
}
img:nth-of-type(even) {
  float: right;
}


можно также использовать формулы (типа 2n + 1), как и для :nth-child()

для форматирования чередующихся строк таблицы этот способ также подойдёт:

Код
tr:nth-of-type(odd) {
  background-color: #D9F0FF;
}
tr:nth-of-type(even) {
  background-color: #FFFFFF;
}

Изменить / Удалить

Форум » III. HTML и CSS » Базовые основы CSS » Дочерние селекторы (Форматирование вложенных элементов)
  • Страница 1 из 1
  • 1
Поиск: