CSS селекторы

15.02.2019 at 12:16

Селекторы – это описание тех элементов страницы, к которым будут применяться определенные свойства. Обычно новички довольствуются тремя основными типами селекторов: класса, id и элемента, но их существует значительно большее количество. Настоящий профессионал должен хорошо ориентироваться во всех возможных видах селекторов в CSS.

Простые селекторы

Синтаксис селектора следующий: сначала указывается его вид, после чего открывается фигурная скобка, в которую записываются все необходимые свойства, после чего она закрывается.
Простые селекторы могут указывать на класс, id и тип элемента. Самый простой из них – последний. Достаточно просто указать тег элемента. Например, так выглядит селектор, указывающий на все ссылки в документе: a {}. Если надо стилизовать все параграфы на странице, селектор будет следующий: p {}.
Внутри селектора прописываются свойства, после которых ставится точка с запятой. Например, если нам нужно задать фоновый цвет всех параграфов в тексте, код будет следующий:

p {
  background-color: red; /* нельзя забывать о точке с запятой после описания свойства */
}

Селектор класса указывает браузеру на элементы, которым присвоен определенный класс (он задается в html с помощью атрибута class). Он обозначается точкой. Предположим, необходимо стилизовать несколько кнопок «купить», обозначающие различные товары.
Необходимо прописать три кнопки с классом buy в HTML.

<button class=”buy”>Купить смартфон</button>
<button class=”buy”>Купить планшет</button>
<button class=”buy”>Купить компьютер</button>

Далее прописывается селектор .buy {}. В результате получится такой код.

<html>
 <head>
  <title>Подчеркивание текста</title>
  <style>
  .buy {
	background-color: blue;
	color: white;
  }

  #back {
    background-color: black;
    color: red;	
  }
  </style> 
 </head> 
 <body>
   <button class="buy">Купить смартфон</button>
   <button class="buy">Купить планшет</button>
   <button class="buy">Купить компьютер</button>
   <button id="back">Вернуться назад</button>
 </body>
</html>

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

Видим, что селектор класса с прописанными в нем свойствами присвоил всем кнопкам, позволяющим купить какой-то товар, синий цвет и белые буквы. А id-селектор обозначил кнопку для возвращения назад, и свойства внутри него сделали фон элемента черным, а буквы – красными.
При этом не рекомендуется злоупотреблять id-селекторами. Идентификатор может использоваться только один раз. Лучше использовать теги или псевдоклассы.

Нестандартные селекторы

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

X Y

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

li a {
  text-decoration: none;
}

*

Это универсальный селектор CSS, который позволяет стилизовать любой элемент веб-страницы. Наиболее часто его применяют для обнуления свойств margin и padding. Но этот селектор очень тяжел для браузера, поэтому лучше его использовать в тестовом режиме.
Еще одно его применение – стилизация всех дочерних элементов. Например, так.

#container * {
  border: 2px solid yellow;
}

Селектор совместим со всеми популярными браузерами, включая IE 6 версии и выше.

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

Псевдоклассы используются для стилизации особых стилей. Например, для ссылок доступно два псевдокласса: link (непосещенные ссылки) и visited (посещенные). Поддерживается минимально седьмой версией Internet Explorer.
Код может выглядеть, например, так: a:link { color: navy }.
Особый вид псевдоклассов – динамические (событийные). Позволяют реализовать стилизацию элемента при наведении на них мышью (:hover), активизированных (:active) и получивших фокус (:focus). Старые версии IE не поддерживают этот псевдокласс на элементах, не являющихся ссылками.
Псевдокласс :checked позволяет задать дизайн отмеченным радиокнопкам и чекбоксам.
Особенно популярны псевдоклассы :before и :after, которые позволяют гибко настроить внешний вид содержимого страницы. Например, с помощью них можно добавить пустую строку перед и после элемента соответственно.
Может пригодиться и псевдокласс отрицания. Он используется для выбора всех элементов кроме какого-то конкретного (или группы). Например, если нужно выбрать все дивы кроме блока с айди nott, то можно прописать такой код.

div:not(#nott) {
  color: blue;
}

Выбрать определенный элемент в стеке можно с помощью псевдокласса :nth-child(n). В качестве параметра нужно указать число. Например, если задать в скобках цифру 4, то появится возможность выбрать четвертый элемент в стеке. Вот как работает css селектор nth child.
Если использовать псевдокласс :nth-last-child(n), можно выбрать определенный элемент с конца. Работает он так же, как nth child, только зеркально. Очень выручает, если список большой.
А выбрать определенный элемент по типу можно с помощью псевдокласса nth-of-type(n). Например, если есть пять ссылок, можно изменить дизайн третьей. Аналогично, изменить определенный элемент конкретного типа с конца можно с помощью псевдокласса :nth-last-of-type(n).
Еще один популярный псевдокласс – :first-child. С его помощью можно указать браузеру на первый дочерний элемент. Нередко он применяется, чтобы убрать рамки вокруг первого и последнего элементов. Аналогично, псевдокласс :last-child выбирает последний дочерний элемент.

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

Псевдоэлементы могут задавать стиль первой линии и первой буквы текста. В первом случае используется селектор p::first-line, а во втором – p::first-letter. Псевдоэлементы обозначаются двумя двоеточиями. Для старых псевдоэлементов подходит и синтаксис с одним двоеточием, но задать новые таким способом не получится. Поэтому рекомендуется указывать два двоеточия.

X + Y

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

ul + p {
  color: red;
}

Более «мягкая» версия этого селектора – X ~ Y. Он позволяет стилизовать все элементы Y, которые находятся после элемента X. Например, селектор a ~ p подействует на все абзацы, которые следуют за ссылкой.

X > Y

Позволяет указать браузеру на прямой дочерний элемент. Особенно хорошо использовать этот селектор одновременно с JavaScript.

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

Позволяет выбрать лишь элементы с определенным атрибутом. Выглядит он так: a[title]. В квадратных скобках можно указать значение атрибута. Например, a[href=»http://google.com»]. Значение атрибута обязательно включать в кавычки. Можно задать часть атрибута с помощью звездочки. Код будет выглядеть так.

a[href*="google"] {
  color: #1f6053; /* google green */
}

Так можно задать все ссылки, ведущие на сайт популярнейшей поисковой системы, независимо от доменной зоны, в которой они находятся. Он сможет стилизовать ссылки, ведущие и на google.com, и на google.ru.
Если вместо звездочки указать знак ^, то можно задать начало атрибута, а знак доллара указывает на его конец. Например, селектор a[href^=»http»] выбирает все ссылки, которые начинаются с http, а селектор a[href$=».jpg»] выбирает все ссылки, ведущие на изображение формата JPG.

Приоритетность селекторов

Если для одного и того же элемента используются разные свойства, браузеру нужно решить, какое из них применять. Поэтому разные селекторы имеют различные приоритеты. Это называется специфичностью. Например, в ряде селекторов к одному и тому же элементу (например, параграфу) больший вес имеет последний. Есть ряд других принципов вычисления приоритетности селекторов. Так, наибольший вес имеет идентификатор (100), несколько меньший – класс (10), а самый маленький – айди (1).
Поэтому чтобы избежать конфликта противоречивых правил, нужно следовать таким простым рекомендациям:

  1. Не стоит использовать id-селекторы, даже если такой элемент только один, поскольку классы имеют больший вес.
  2. Не надо к одному элементу присваивать несколько классов.
  3. Не следует применять стили непосредственно в HTML-тегах. Например, так делать нельзя: < div style="background: blue;">. Стили задаются только в CSS-блоках.

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

Комбинирование селекторов между собой позволяет сделать код более компактным. Стиль задается, исходя из положения элементов относительно друг друга.
Один из способов комбинирования селекторов – группирование. С его помощью можно стилизовать сразу несколько элементов. Чтобы это сделать, надо перечислить с помощью запятой необходимые элементы, а потом поставить фигурные скобки, в которых и прописываются одинаковые стили. Например, так: h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; }. А потом можно отдельно прописывать другие свойства, специфичные для каждого элемента стандартным способом. Например, h3 { font-size: 1.2rem; color: #900; }.
В перечень можно вносить не только селекторы одного типа, но и другие. Например, h2, .block, .msg { background: #fff; }.
Другие способы комбинирования селекторов подробно описаны выше. Например, селекторы потомка A > B или смежные селекторы A + B.

Родительский селектор

К сожалению, способов выбрать родительский селектор в CSS нет. Поэтому приходится пользоваться JavaScript для выбора старшего элемента. Штатными средствами CSS можно разве что прописать селектор класса, и это тоже неплохой способ.

Tags: