CSS-селекторы

Селектор CSS - это один из фундаментальных механизмов CSS, реализация которого позволяет определять, к каким элементам документа будет применено то или иное CSS-правило (стиль).

Подробнее о CSS

CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

Каскадные таблицы стилей (CSS) описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств.

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

Объявление стиля элемента состоит из двух частей (селектора и объявления):

В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1».

[свернуть]

Базовые правила типографики CSS:

  1. используйте стандартные шрифты;
  2. используйте не больше двух шрифтов на странице;
  3. используйте достаточный размер шрифта;
  4. используйте достаточный межстрочный интервал;
  5. выравнивайте текст по левому краю.

Базовые (основные) селекторы CSS

Приоритет стилей CSS из разных источников (от слабого к сильному):

  1. стили по умолчанию, которые добавляет браузер;
  2. стили в отдельном css-файле;
  3. стили в атрибуте тега.

Важность (приоритет) селекторов CSS (от слабого к сильному):

  1. тег;
  2. class;
  3. id;
  4. inline (указание style="..." внутри тега);
  5. !important

Обобщённые свойства CSS важнее отдельных: если в коде вы указали для элемента font-variant: small-caps; (капитель), а потом для этого же элемента применили font: 16px/24px sans-serif;, то капитель будет сброшена.

Пример приоритета селекторов CSS

 

[свернуть]

Подробнее о пространстве имен @namespace

Синтаксис селектора Функционал Пример
Универсальный
  • ns|* - все элементы в пространстве имен ns
  • * или *|* - все элементы
  • |* - все элементы без объявленного пространства имен
Выбор всех элементов (по желанию, может быть ограничен определённым пространством имён).
По типу элемента
  • ns|h1 - элементs <h1> в пространстве имен ns
  • *|h1 - все элементы <h1>
  • |h1 - все элементы <h1> без объявленного пространства имен 
Выбор всех элементов данного типа (по желанию, может быть ограничен определённым пространством имён).
По классу
Выбор элементов на основе значения их атрибута class.
По идентификатору
Выбор элементов на основе значения их атрибута id. Идентификатор id должен быть уникальным, т. е. использоваться только для одного элемента в документе.
По атрибуту

 

Выбор элементов на основе наличия или значения данного атрибута.

 

Комбинаторы селекторов

Название Синтаксис комбинатора Функционал Пример

Универсальный комбинатор

","

A, B выбирает все узлы, указанные через ","

Комбинатор потомков

' ' (пробел)

A B выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности)

Комбинатор дочерних элементов

'>'

A > B выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу

Комбинатор всех соседних элементов

'~'

A ~ B выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем

Комбинатор следующего соседнего элемента

'+'

A + B выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель

Псевдоклассы и псевдоэлементы

Примеры https://habr.com/ru/sandbox/50759/

Псевдоклассы

Именование

Синтаксис

Описание

Псевдоклассы

знак ':'

 :pseudo-class (из Списка стандартных псевдоклассов), добавленное к селектору, определяет его особое состояние

:link

Объединяет все ссылки, которые еще не посещались

:visited

Объединяет все ссылки, которые пользователь уже успел посетить

:active

Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

:hover

Изменение стиля при наведении указателя мыши

:focus

 

Изменяет стиль при фокусировке, например для подсветки полей формы при фокусировке на нем

:first-letter

Определяет стиль для первого символа в тексте элемента

:first-line

Определяет стиль первой строки. Например, используется для изменения цвета текста, цвета фона и шрифта, но на этом его функции не ограничиваются.

:first-child

Применяет стилевое оформление к первому дочернему элементу своего родителя (например, если р - первый элемент своего родителя)

:before

Применяются для отображения нужного контента до или после содержимого элемента, к которому он добавляется. Работают совместно со свойством content:. Можно использовать как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";При добавлении :before к блочному элементу, значение свойства display может быть только: blockinlinenonelist-item; все остальные значения будут трактоваться как block. При добавлении :before к встроенному элементу, display ограничен значениями inline и none; все остальные будут восприниматься как inline. Кроме того, :before наследует стиль от элемента, к которому он добавляется.

:after

:lang

Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»

:first-of-type

Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.

:last-of-type

Задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.

:only-of-type

Применяется к дочернему элементу указанного типа, только если он единственный у родителя (аналогично :first-of-type:last-of-type ).

:only-child

Применяется к дочернему элементу, только если он единственный у родителя

:root

Определяет корневой элемент документа.

:empty

Определяет пустые элементы — без каких-либо дочерних элементов, текста или пробелов.

:target

Определение на основе целевого элемента (например, текущего id — #news element). Используется для URL.

:enabled

Применяется к незаблокированным (не disabled) элементам форм.

:disabled

Применяется к заблокированным элементам форм.

:checked

Применяется к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они отмечены.

:not(selector)

Применяется ко всем элементам, которые не p (для примера). В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.

Псевдоэлементы

знак '::'

::pseudo-element (из Списка стандартных псевдоэлементов), добавленное к селектору, которое позволяет вам стилизовать определенную часть выбранных элементов.

 

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.