CSS-селекторы: зачем нужны и как применять

О чем речь? CSS селектор – это необходимый инструмент для оформления веб-страницы. Используя один или сразу несколько, можно точечно задать стилевое оформление нужного элемента.

На что обратить внимание? Селекторы бывают простые и сложные, а также их можно группировать по заданным параметрам. Освоив эти операции, время верстки значительно снизится, как и количество проблемным видом страниц.

Понятие CSS селекторов

CSS-селектор является шаблоном, соответствующим определённым элементам HTML-разметки. К тегам, которые подходят для правил селектора, могут быть применены стили.

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

В CSS множество различных видов селекторов. Они могут использоваться по одиночке или в различных комбинациях. Это позволяет производить весьма тонкую настройку стилей к выбранным элементам кода, либо к их группам.

Несколько советов новичкам:

• Следует помнить, что в CSS необходимо учитывать регистр букв. В отличие от html это имеет смысл. Таким образом, селекторы css по классу. Center и. center кардинально различаются! Они применимы к совершенно разным элементам, имеющимся в наличии.
• Присваивайте имена селекторам для оформления таким образом, чтобы по ним было понятно о чем речь: .leftColumn – пример неплохого названия, .left в некоторых случаях будет уже неопределенным наименованием, а .llll является полнейшим абсурдом, который без кода под рукой не несет абсолютно никакой полезной информации.
• К уникальным элементам можно применять селектор по идентификатору, то есть присвоить им определенный id, если же страница содержит несколько идентичных компонентов, то следует пользоваться классами.

Виды CSS-селекторов

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

Один из базовых видов селекторов CSS, имеющий альтернативное название «звездочка», служит для выбора всех элементов.

* {

color: red;

}

При применении этого правила текст всех элементов html на веб-странице приобретет красный цвет.

Селектор по тегу

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

section {

padding: 1em;

}

Правило предписывает: каждый из элементов <section> будет иметь отступ размером 1em.

Селектор класса

Селектор класса выберет в документе все элементы, к которым был применен класс. Он начинается с символа «точка» ( . )

<div class=»my-class»></div>

<button class=»my-class»></button>

<p class=»my-class»></p>

Компонент документа приобретет жёлтый цвет, если применить к нему этот класс:

.my-class {

color: yellow;

}

Если у элемента html есть несколько классов, среди которых .my-class, то он все равно будет соответствовать этому правилу CSS. Например:

<div class=»my-class another-class some-other-class»></div>

Причина в том, что CSS производит поиск атрибута class, содержащий определенный класс, а не то, что имеет точное соответствие ему.

Атрибут класса может принимать любое значение. Единственное ограничение – запрет на цифру в начале. Например, .2center – это ошибочная запись.

Селектор по идентификатору

Синтаксис — #имяИдентификатора. Предназначен для выбора элемента по значению атрибута id. Пример использования:

#rad {

border: 1px solid blue;

}

Здесь задается граница синего цвета для элемента гипертекстовой разметки со значением rad атрибута id. Пример:

<div id=»rad»></div>

Селектор идентификатора CSS обозначается символом октоторп ( # ). Обнаружив решётку, CSS ищет элемент, который соответствует атрибуту id.

В случае обнаружения веб-обозревателем нескольких элементов, сопоставленных с атрибутом id, все равно будет применяться правило CSS, соответствующее селектору этого атрибута. Но, важно помнить, что у каждого элемента id должно быть уникальное значение. Поэтому применение стилей оформления с использованием селектора по идентификатору ограничено, так как его нельзя будет использовать в другом части кода.

Селектор атрибута

СSS-селектор по атрибуту нужен для выбора элементов по имени и/или значению атрибута. Есть несколько видов селектора по атрибуту. CSS поймет, что следует искать определенный атрибут или его значение, если селектор помещен в квадратные скобки — [attr].

[data-type=’primary’] {

color: purple;

}

В этом образце происходит поиск элементов с атрибутом data-type, значение которого — primary. Пример: <div data-type=»primary»></div>

Возможно задание критерия поиска не только по конкретному значению атрибута data-type, но и по факту наличия у элементов этого атрибута при игнорировании его названия.

[data-type] {

color: purple;

}

<div data-type=»primary»></div>

<div data-type=»secondary»></div>

Текст в приведенных элемента <div> будет иметь пурпурный цвет.

Оператор s, добавленный в селектор по атрибуту позволяет учитывать регистр.

[data-type=’primary’ s] {

color: purple;

}

Скачать файл

Допустим, что элемент гипертекстовой разметки атрибут data-type имеет значение Primary, то есть с большой буквы. В этом случае, CSS, имеющий четкие указания обращать внимание только на элемент с атрибутом primary, оставит цвет текста без изменения. Есть и обратная функция. Оператор i отключает учет регистра.

Возможно также использование операторов, сопоставляющих компоненты строк внутри значений атрибутов.

/* Элемент href, содержащий адрес «example.com» */

[href*=’example.com’]{

color: purple;

}

/* Элемент href, начинающийся с https */

[href^=’https’]{

color: grey;

}

/* Элемент href, оканчивающийся на .com */

[href$=’.com’] {

color: grey;

}

Читайте также!

Бинарный поиск: зачем нужен и как реализовать

Подробнее

В этом примере кода оператору $ в CSS-селекторе атрибута присваивается значение типа файла из атрибута href. Это дает возможность использовать псевдоэлемент для добавления префикса к подписи на основе этого типа файла. Динамические идентификаторы в CSS-selector не надёжны, поэтому можно обратиться к элементу, написав CSS-селектор по атрибуту Name.

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

Псевдоклассы являются дополнением к основному селектору для более точного выбора элементов с учетом их динамического состояния или места расположения.

С их помощью становится возможным применение стиля при наведении курсора как на сам элемент html, так и на его дочерний элемент. Псевдокласс добавляется к селектору символом «двоеточие». При этом такие псевдоклассы как :link предназначены только для ссылок, а :hover или :active используются и для других элементов.

/* На нашу ссылку навели курсор */

a:hover{

outline: 1px dotted red;

}

/* Выбор другого цвета фона для всех четных абзацев */

p:nth-child(even) {

background: silver;

}

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

По своей сути псевдоэлементы в CSS – это ключевые слова, добавленные к селектору и позволяющие применять стиль к определенной части компонента. Их основное отличие от псевдоклассов в том, что они не могут быть использованы для применения стиля элементу на основе его состояния. В синтаксисе псевдоэлементов используется продублированный знак «двоеточие» — (::).

Такого различия в синтаксисе не было в старых версиях CSS. Веб-браузеры поддерживают обычное не сдвоенное двоеточие для исходных псевдоэлементов, например, : before и : after. Таким образом обеспечивается поддержка устаревших обозревателей.

.my-element::before {

content: ‘Prefix — ‘;

}

В этом примере применение псевдоэлемента ::before позволяет сделать вставку содержимого в начало, а при помощи ::after — соответственно, в конец элемента.

Функционал псевдоэлементов гораздо шире. Они могут применяться для стилизации отдельных компонентов. допустим, перед вами стоит задача стилизовать маркированный список. При помощи ::marker имеется возможность изменить каждый номер.

/* меняем цвет маркера на зелёный */

li::marker {

color: green;

}

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

::selection {

background: grey;

color: yellow;

}

Составные селекторы

Составные селекторы – это комбинация, состоящая из нескольких selector CSS, которые разделены специальными символами. Таких комбинаторов четыре – пробел, знак больше ( > ), тильда ( ~) и плюс ( + ). Если вы хотите выбрать компоненты <a>, имеющих класс .my-class, применяйте следующий код:

a.my-class {

color: black;

}

В этом случае черный цвет будет применяться исключительно к элементу .my-class при условии, что он находится в <a>.

CSS селекторы потомков

В любом html документе каждый элемент связан с другими компонентами. Потомки – это элементы, находящиеся в рассматриваемом компоненте вне зависимости от их иерархических уровней.

.wraping p {

padding: 15px;

}

Дочерние селекторы CSS

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

.wraping>p {

`padding: 15px;

}

Соседние селекторы CSS (сиблинги)

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

h1 + p {

padding-bottom: 30px;

}

Группирование CSS селекторов

селектор в css правиле устанавливает стили (CSS свойства). Бывает так, что селекторы описывают идентичные правила. В этом случае их можно перечислить через запятую, при этом синтаксис выглядит так: selector1, selector2, selector3, … Пример:

h1 {

font-size: 24px;

font-weight: normal;

}

h2 {

font-size: 16px;

font-weight: Extra Bold;

}

h3 {

font-size: 18px;

font-weight: Extra Bold;

}

Анкета

В примере показано, что правило стиля «насыщенность шрифта» — сверхжирное начертание используется селекторами h1, h2 и h3. Для минимизации кода их можно подвергнуть группировке:

h1, h2, h3 {

font-weight: Extra Bold;

}

h1 {

font-size: 24px;

}

h2 {

font-size: 16px;

}

h3 {

font-size: 18px;

}

Приоритизация селекторов

При наличии ряда правил, регламентирующих один и тот же стиль оформления какому-либо элементу, приоритет отдается самому «весомому» селектору.

Специфичность селекторов записывается посредством числового ряда из 4 позиций: 0,0,0,0.

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

Что означают числа на этих четырех позициях? Вес селектора зависит от его типа:

• селектор универсальный (без добавления веса) – 0,0,0,0;
• селекторы по элементу выглядят так – 0,0,0,1;
• селекторы по классу и по атрибуту смещают единицу на третью позицию – 0,0,1,0;
• селектор по id – 0,1,0,0;

Атрибут style элемента, содержит наиболее специфичные свойства, поэтому единица занимает самое приоритетную (левую) позицию – 1,0,0,0.

Пример:

* – 0,0,0,0;

li – 0,0,0,1;

li::before – 0,0,0,2;

ul > li – 0,0,0,2;

div input+label – 0,0,0,3;

h1 + div[data-target] – 0,0,1,2;

.btn.show – 0,0,2,0;

ul li a.item – 0,0,1,3;

#aside div.show – 0,1,1,1;

style=»…» – 1,0,0,0;

Можно вручную повысить вес CSS стиля, для этого надо прописать оператор !important, который сделает селектор более специфичным. Если же написать два таких слова, то возникнет конфликт, который решается сравнением весов селекторов.

Читайте также!

Типы структур данных в программировании

Подробнее

Например:

<div class=»alert-warning» style=»background-color: black;»> … </div>

В CSS:

.alert-warning {

background-color: white !important;

}

Этот пример иллюстрирует приоритетность правила со словом !important. Цвет фона будет белым.

Как уже говорилось выше, применение !important к нескольким элементам запустит механизм определения приоритетного свойства CSS путем сравнения веса селекторов.

Если же добавить !important к CSS свойству расположено в style, у которого и так наивысший приоритет, то эффект специфичности станет максимальным, и будет производиться выполнение этого стиля.

Приведем пример:

<p id=»message» style=»font-size: 22px !important;»>…</p>

CSS:

p#message {

font-size: 14px !important;

}

Этот пример иллюстрирует, что к элементу #message будет применен стиль «размер шрифта» со значением 22px, потому что вес Style (1.0.0.0) имеет наивысший приоритет, а слова !important в данном случае уравниваются.

В CSS отсутствует селектор для получения родительского элемента. Возможно, в следующей версии CSS появится такая фича, но в текущей CSS3 такого выбора нет.

Надеемся, что в этой статье вы получили полезный практический опыт применения с CSS селекторов. Все эти методы предназначены для удобства указания определенных html-элементов для применения к ним различный стилей оформления.