Представляем CSS селекторы
Селектор CSS является частью набора правил CSS, который фактически выбирает контент, который вы хотите стилизовать. Давайте рассмотрим все виды доступных селекторов, с кратким описанием каждого.
Универсальный селектор
Универсальный селектор работает как символ подстановки, выбирая все элементы на странице. Каждая страница HTML построена на контенте, размещенном в тегах HTML. Каждый набор тегов представляет элемент на странице. Посмотрите на следующий пример CSS, в котором используется универсальный селектор:
* { color: green; font-size: 20px; line-height: 25px; } Три строки кода внутри фигурных скобок ( color , font-size и line-height ) будут применяться ко всем элементам на странице HTML. Как видно здесь, универсальный селектор объявлен с использованием звездочки. Вы также можете использовать универсальный селектор в сочетании с другими селекторами.
Выбор типа элемента
Также называемый просто «селектором типа», этот селектор должен соответствовать одному или нескольким элементам HTML с одинаковым именем. Таким образом, селектор nav будет соответствовать всем HTML-элементам nav , а селектор <ul> будет соответствовать всем неупорядоченным спискам HTML или элементам <ul> .
В следующем примере используется селектор типа элемента для соответствия всем элементам <ul> :
ul { list-style: none; border: solid 1px #ccc; }
Чтобы поместить это в некоторый контекст, вот раздел HTML, к которому мы применим вышеупомянутый CSS:
<ul> <li>Fish</li> <li>Apples</li> <li>Cheese</li> </ul> <div class="example"> <p>Example paragraph text.</p> </div> <ul> <li>Water</li> <li>Juice</li> <li>Maple Syrup</li> </ul>
Эту часть страницы составляют три основных элемента: два элемента <ul> и элемент <div> . CSS будет применяться только к двум элементам <ul> , а не к <div> . Если бы мы изменили селектор типа элемента, чтобы использовать <div> вместо <ul> , тогда стили будут применяться к <div> а не к двум элементам <ul> .
Также обратите внимание, что стили не будут применяться к элементам внутри элементов <ul> или <div> . При этом некоторые стили могут наследоваться этими внутренними элементами.
Селектор идентификаторов
Селектор идентификатора объявляется с использованием хеша или символа решетки ( # ), предшествующего строке символов. Строка символов определяется разработчиком. Этот селектор соответствует любому HTML-элементу, который имеет атрибут ID с тем же значением, что и у селектора, но без символа хеша.
Вот пример:
#container { width: 960px; margin: 0 auto; }
Этот CSS использует селектор идентификатора для соответствия элементу HTML, например:
<div id="container"></div>
В этом случае тот факт, что это элемент <div> не имеет значения — это может быть любой элемент HTML. Пока у него есть атрибут ID со значением container , стили будут применяться.
Элемент ID на веб-странице должен быть уникальным. То есть на каждой странице должен быть только один элемент с идентификатором container . Это делает селектор идентификаторов довольно негибким, потому что стили, используемые в наборе правил селектора идентификаторов, могут использоваться только один раз на страницу.
Если на странице окажется несколько элементов с одинаковым идентификатором, стили будут по-прежнему применяться, но HTML-код на такой странице будет недопустимым с технической точки зрения, поэтому вам следует избегать этого.
В дополнение к проблемам негибкости, селекторы ID также имеют проблему очень высокой специфичности.
Выбор класса
Селектор класса является наиболее полезным из всех селекторов CSS. Он объявляется с точкой, предшествующей строке из одного или нескольких символов. Как и в случае с селектором идентификатора, эта строка символов определяется разработчиком. Селектор класса также соответствует всем элементам на странице, атрибут атрибута класса которых имеет то же значение, что и класс, за исключением точки.
Возьмите следующий набор правил:
.box { padding: 20px; margin: 10px; width: 240px; }
Эти стили будут применяться к следующему элементу HTML:
<div class="box"></div>
Те же стили будут применяться к любым другим элементам HTML, которые имеют атрибут класса со значением box . Наличие нескольких элементов на одной странице с одним и тем же атрибутом класса полезно, поскольку позволяет повторно использовать стили и избегать ненужного повторения. В дополнение к этому, селекторы классов имеют очень низкую специфичность — опять же, об этом позже.
Другая причина, по которой селектор классов является ценным союзником, заключается в том, что HTML позволяет добавлять несколько классов к одному элементу. Это делается путем разделения классов в атрибуте класса HTML с помощью пробелов. Вот пример:
<div class=”box box-more box-extended”></div>
Потомок комбинатор
Селектор потомков или, точнее, комбинатор потомков, позволяет комбинировать два или более селекторов, чтобы вы могли быть более точными в своем методе выбора. Например:
#container .box { float: left; padding-bottom: 15px; }
Этот блок объявления будет применяться ко всем элементам, которые имеют класс box, который находится внутри элемента с идентификатором container . Стоит отметить, что элемент .box не обязательно должен быть непосредственным дочерним элементом: может быть другой элемент, обертывающий .box , и стили все равно будут применяться.
Посмотрите на следующий HTML:
<div id="container"> <div class="box"></div> <div class="box-2"></div> </div> <div class="box"></div>
Если мы применим CSS в предыдущем примере к этому разделу HTML, единственным элементом, который будет затронут этими стилями, является первый элемент <div> который имеет класс box . Элемент <div> , имеющий класс box-2 , не будет затронут стилями. Аналогично, второй элемент <div> с классом box не будет затронут, потому что он не находится внутри элемента с идентификатором container .
Вы должны быть осторожны при использовании комбинатора-потомка в своем CSS. Этот тип селектора, хотя и делает ваш CSS немного легче для чтения, может излишне ограничивать ваши стили конкретным контекстом — в этом случае стили ограничиваются блоками внутри #container что может сделать ваш код негибким.
Детский комбинатор
Селектор, который использует child комбинатор, аналогичен селектору, который использует child комбинатор, за исключением того, что он предназначен только для непосредственных child элементов:
#container > .box { float: left; padding-bottom: 15px; }
Это тот же код из примера комбинатора-потомка, но вместо пробела мы используем символ больше (или правую угловую скобку).
В этом примере селектор будет соответствовать всем элементам, которые имеют класс box и являются непосредственными #container элемента #container . Это означает, что в отличие от комбинатора-потомка, не может быть другого элемента, .box — это должен быть прямой дочерний элемент.
Вот пример HTML:
<div id="container"> <div class="box"></div> <div> <div class="box"></div> </div> </div>
В этом примере CSS из предыдущего примера кода будет применяться только к первому элементу <div> который имеет класс box . Как видите, второй элемент <div> с классом box находится внутри другого элемента <div> . В результате стили не будут применяться к этому элементу, даже если у него тоже есть класс box .
Опять же, селекторы, использующие этот комбинатор, могут несколько ограничивать, но они могут пригодиться, например, при оформлении вложенных списков.
Генеральный брат и сестра комбинатор
Селектор, который использует общий братский комбинатор, сопоставляет элементы на основе родственных связей. То есть выделенные элементы находятся рядом друг с другом в HTML.
h2 ~ p { margin-bottom: 20px; }
Этот тип селектора объявляется с использованием символа тильды (~). В этом примере все элементы абзаца ( <p> ) будут стилизованы с указанными правилами, но только если они являются родственными элементами <h2> элементов. Между <h2> и <p> могут быть другие элементы, и стили все равно будут применяться.
Давайте применим CSS сверху к следующему HTML:
<h2>Title</h2> <p>Paragraph example.</p> <p>Paragraph example.</p> <p>Paragraph example.</p> <div class="box"> <p>Paragraph example.</p> </div>
В этом примере стили будут применяться только к первым трем элементам абзаца. Последний элемент абзаца не является родственным элементом элемента <h2> поскольку он находится внутри элемента <div> .
Смежный брат и сестра комбинатор
Селектор, который использует соседний братский комбинатор, использует символ «плюс» (+) и практически такой же, как и обычный селекторный брат. Разница в том, что целевой элемент должен быть непосредственным братом, а не просто родным братом. Давайте посмотрим, как выглядит код CSS для этого:
p + p { text-indent: 1.5em; margin-bottom: 0; }
В этом примере будут применены указанные стили только к элементам абзаца, которые непосредственно следуют за другими элементами абзаца. Это означает, что первый элемент абзаца на странице не получит эти стили. Кроме того, если между двумя абзацами появится другой элемент, во втором абзаце не будут применены стили.
Итак, если мы применим этот селектор к следующему HTML:
<h2>Title</h2> <p>Paragraph example.</p> <p>Paragraph example.</p> <p>Paragraph example.</p> <div class="box"> <p>Paragraph example.</p> <p>Paragraph example.</p> </div>
… стили будут применяться только ко второму, третьему и пятому абзацам в этом разделе HTML.
Выбор атрибутов
Селектор атрибутов предназначен для элементов на основе наличия и / или значения атрибутов HTML и объявляется в квадратных скобках:
input[type="text"] { background-color: #444; width: 200px; }
Перед открывающей квадратной скобкой не должно быть пробела, если только вы не собираетесь использовать его вместе с комбинатором-потомком. Вышеупомянутый CSS будет соответствовать следующему элементу:
<input type="text">
Но это не будет соответствовать этому:
<input type="submit">
Селектор атрибута также может быть объявлен с использованием только самого атрибута, без значения, например:
input[type] { background-color: #444; width: 200px; }
Это будет соответствовать всем элементам ввода с атрибутом типа, независимо от значения.
Вы также можете использовать селекторы атрибутов, не указывая ничего вне квадратных скобок (таким образом, таргетинг основан на одном атрибуте, независимо от элемента). Стоит также отметить, что при использовании значений у вас есть возможность включать кавычки (одинарные или двойные) или нет.
Псевдо-класс
Псевдокласс использует символ двоеточия для определения псевдосостояния, в котором может находиться элемент, например, состояние зависания или состояние активации. Давайте посмотрим на общий пример:
a:hover { color: red; }
В этом случае часть псевдокласса селектора является частью :hover . Здесь мы прикрепили этот псевдокласс ко всем элементам привязки ( элементы). Это означает, что когда пользователь наводит указатель мыши на element, свойство color для этого элемента изменится на красный. Этот тип псевдокласса является динамическим псевдоклассом, потому что он возникает только в ответ на взаимодействие с пользователем — в этом случае мышь перемещается над целевым элементом.
Важно признать, что эти типы селекторов не просто выбирают элементы; они выбирают элементы, которые находятся в определенном состоянии. Для целей этого примера состояние является состоянием «зависания».
Псевдо-элемент
Наконец, CSS имеет селектор, называемый псевдоэлементом, и при правильном использовании он может быть очень полезным. Единственное предостережение в том, что этот селектор сильно отличается от других примеров, которые мы рассмотрели. Давайте посмотрим псевдоэлемент в контексте:
.container:before { content: ""; display: block; width: 50px; height: 50px; background-color: #141414; }
В этом примере используется один вид псевдоэлемента :before псевдоэлемент :before . Как следует из названия, этот селектор вставляет воображаемый элемент на страницу, внутри целевого элемента, перед его содержимым.