Облако знаний. Классы в каскадных таблицах. Составные селекторы. Информатика. 11 класс

Классы в каскадных таблицах. Составные селекторы

Селекторы – это шаблоны для выбора HTML-элементов, к которым будут применяться стили. Простые селекторы бывают трёх видов:
- селекторы по тэгам
  p { color: black; }
- селекторы по классам
  <div class = "content">Контент</div> // html-код
  .content { background-color: #f0f0f0; } // css
- селекторы по идентификаторам (уникальные элементы)
  <div id = "footer">Нижняя часть сайта</div> // html-код
  #footer { color: black; } // css
Составные селекторы объединяют в себе несколько простых с помощью специальных комбинаторов:
- селектор потомков (соединяются через пробел, используется для потомков)
  div p { color: black; } // Все параграфы внутри div
  body .container {background-color: #f0f0f0} // Все элементы с классом container внутри body
- селектор дочерних элементов (соединяются через ＞, используется для прямых наследников)
  ul > li { list-style-type: none; } // Только прямые li внутри ul
- селектор сестринских элементов (соединяются через +, используется для элементов одного уровня)
  h3 + p { color: black; } // Первый параграф после h3
- селектор родственных элементов (соединяются через ~; используется для всех элементов одного уровня, следующих за указанным)
  h2 ~ p { color: black; } // Все параграфы после h2
  .button ~ .button { margin-left: 5px; } // Все кнопки после первой

Было полезно?