Селекторы CSS

CSS это язык описания внешнего вида тегов. Подобно любому языку он имеет свои правила синтаксиса, закономерности и логику работы. Основным понятием в CSS является селектор — некоторое имя, определяющее перечень HTML-элементов, к которым описанный далее стиль будет применяться. Селекторами могут быть теги, классы, идентификаторы, атрибуты и даже текущие изменённые состояния элементов (события)! Пример простого CSS кода:

                

                div{ font-size: 18px; }

section{
    background-color: green;
}

Прежде всего в ходе определения стилевого свойства указывается селектор элемента, например div или section. Это будет означать, что все описанные правила применятся ко всем этим элементам в документе. После селектора идут фигурные скобки, в них сперва записывается стилевое свойство, а после двоеточия — его значение. Свойства разделяются между собой точкой с запятой. Закрывающая фигурная скобка означает, что правило описано и далее вновь следует селектор.

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

Универсальный селектор * производит выборку вообще всех элементов в разметке. Вы можете подумать: «Зачем нам задавать стиль для всех элементов сразу?». На самом деле этот селектор используется практически во всех современных сайтах. Благодаря ему разработчики производят сброс стилей — устанавливают предопределённые браузерами свойства CSS на нулевые и базовые значения, с которыми удобнее работать. Подробно об этом понятии мы ещё поговорим дальше, пока что достаточно будет запомнить, что сбросы стилей применяются почти на всех сайтах. Пример кода, где универсальный селектор применяется для сброса стилей:

                

                *{
    box-sizing: border-box;
    outline:  none;
    background-repeat: no-repeat;
}

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

Любой HTML-тег может быть селектором. Такой селектор задаётся очень просто: указанием названия тега. Селектор для всех тегов div именно таким и будет: div. Это правило одинаково работает для всех тегов без каких-либо исключений. Пример с div и section уже был выше и дальше будут ещё, поэтому останавливаться на этом мы не будем.

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

Селекторы классов являются наиболее важными для понимания, поскольку они применяются чаще всего при описании стилей. Они могут применяться отдельно или вместе с тегом. Запись селектора может иметь следующий вид:

                

                .notice{
    color:  yellow;
}
span.notice{
    color:  yellow;
}

Первый вариант применит стили ко всем элементам класса notice, второй — ко всем тегам <span> класса notice.

Мы также можем применить стили к элементам, которые имеют сразу два или три класса. Например, если мы хотим применить стили к тегу span с классами notice и notice_warning, нам следует составить такой селектор:

                

                span.notice.notice_warning{
    color:  yellow;
}

В таком случае классы пишутся вслед за тегом и друг за другом последовательно, без пробелов, запятых и пр. Такой селектор выберет все span на странице, имеющие одновременно классы notice и notice_warning. Если у какого-либо span будет только один из этих классов, наши стили к нему не применятся. Обратите внимание, что в именах классов, как уже было сказано в уроках по HTML, можно использовать нижние подчёркивания (_), дефисы (-) и цифры. Более того, согласно различным методолгиям, именно эти символы-разделители будут помогать нам писать правильные, понятные классы. Другой пример с <div>:

                

                div.user-card.user-card__disabled{
    border-color: red;
}

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

Говоря о наиболее часто применяемых селекторах стоит рассказать о группировании селекторов. Например, мы хотим применить какие-то стили одновременно к div и span, совершенно не различая их. Такое встречается в уже упомянутых сбросах стилей, да и в коде любого разработчика тоже. При такой необходимости мы должны обратиться одновременно ко всем div и span, сгруппировав их запятой:

                

                div,span{
    font-size: 16px;
}
.notice,
.special-text,
mark{
    color:  yellow;
}

Группировать, как видите, можно не только селекторы тегов, но также селекторы классов, селекторы классов и тегов и т.д. В действительности группировать можно любые селекторы с любыми, ведь вы, группируя их, всего лишь объявляете, что для них тоже будут действовать указанные правила CSS. Это избавляет нас от необходимости повторять одинаковое правило\набор правил, делает код проще и лаконичнее.

Селекторы идентификаторов

Подобно классу работает и идентификатор. Разумеется, поскольку идентификатор по стандартам HTML должен быть единственным и уникальным, у элемента не может быть двух идентификаторов, а также идентификатор не может повторяться. Селектор идентификатора указывается при помощи символа решётки (#). Синтаксис и все правила написания такие же, как и для селектора класса, в том числе правила связывания и группирования этого селектора:

                

                #intro-notice{
    color: darkcyan;
}
section.theme-section#product-section,
.custom-section{
    margin: 5rem 0;
}

Первый селектор выберет любой тег с идентификатором intro-notice, второй <section id="product-section" class="theme-section">, а также все теги с классом custom-section.

Контекстные селекторы

Они позволяют нам выбирать теги, которые вложены внутрь других тегов. Это в вёрстке рядовая ситуация, когда блок вложен в секцию, абзац — в блок, ссылка — в абзац, и т.д. Чтобы применить стили только к ссылкам, вложенным в абзац, мы можем воспользоваться контекстным селектором. При этом ссылки, лежащие вне абзацев, не будут затронуты. Контекстный селектор указывается через пробел, например:

                

                span a{
    text-decoration: none;
}
section div p{
    margin: 0;
}
header nav ul li a span{
    position: absolute;
}

Первый пример применит стиль ко всем ссылкам, находящимся внутри span. Второй — к параграфам, которые находятся внутри div, находящихся внутри section. Мы можем выстраивать таким образом цепочки из селекторов сколь угодно длинные. Однако вы должны понимать, что указанные правила CSS применятся только к последнему элементу, то есть в первом примере — к ссылкам, во втором — к параграфам, в третьем — к span. Все прочие указанные теги нужны лишь для создания подходящего нам селектора.

Контекстные селекторы, как и любые другие, можно комбинировать:

                

                .intro-section .welcome-btn img{
    width: 20vw;
}

Данный стиль применится ко всем тегам <img>, вложенным в теги с классом welcome-btn, которые в свою очередь вложены в класс intro-section.

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

Как видите, стилизуются все ссылки, лежащие внутри <div>, лежащих внутри <section>, при этом уровень вложенности не играет роли. Третья по порядку ссылка также была стилизована, поскольку она лежит внутри <div> с классом container. А вот последняя ссылка лежит внутри <p>, который лежит внутри <section>. В правилах у нас ничего не сказано про параграф <p> и, поскольку никаких предков <div> у ссылки нет, она не стилизуется.

Соседние селекторы

Соседними, или сиблингами (siblings), называют селекторы, непосредственно располагающимися в разметке друг за другом на одном уровне. Например, <div> и <p> будут соседними в следующем примере, текст внутри параграфа станет тёмно-синим:

Учтите, что при помощи соседних селекторов вы только можете прописать условие, при котором хотите выбрать определённый тег. Стилизован будет только он! Относительно примера выше <div> является только «подсказкой» для определения селектора и непосредственно к элементам, которые будут стилизоваться указанными правилами, не относится! Ещё один пример, более сложный, со вложенностью:

В селекторе мы выбираем <div class="notice">, лежащий внутри <header>, а далее обращаемся к следующему сразу за ним <p class="theme-text" > и стилизуем его. Можем ещё усложнить пример, добавив после параграфа ссылку и стилизовав её:

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

Дочерним в CSS называется элемент, который вложен в какой-либо другой элемент. Например, <body> является дочерним для <html>. А для <body> в большинстве случаев дочерним является <header>, и так далее. Дочерние элементы в CSS обозначаются при помощи знака «больше» >. Стоит отметить, что элементы, вложенные в дочерние элементы, по отношению к верхнему родителю дочерними не являются, то есть важен уровень вложенности, он должен быть первым. Проще освоить понятие дочерних элементов будет на примере:

В результате будут стилизованы только ссылки, являющиеся дочерними к <nav>, а это ссылки «Главная», «Продукты», «Контакты». Ссылки внутри <div> не являются дочерними к <nav>. Они дочерние только для <div>.

Не следует путать дочерние селекторы с контекстными! Контекстные находят все указанные элементы на любых уровнях вложенности, дочерние — только на первом.

Понятие «дочерний» относится не только к селекторам в CSS. В HTML все элементы — родительские или дочерние. Мы уже использовали такие определения в ходе уроков. Также эта модель используется и в работе JavaScript, и действует она точно так же: дочерними элементами считаются элементы только на первом уровне вложенности.

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

Простые селекторы атрибутов

В CSS мы можем обращаться к тегам различными способами: по именам, классам, идентификатору, но также мы можем в качестве css-селекторов использовать прочие атрибуты тегов. Скажем, мы можем покрасить в определённый цвет <span>, имеющие некоторый атрибут. В таких случаях следует пользоваться селектором атрибутов, который пишется в квадратных скобках, пример:

                

                <style>
    span[lang]{
        color:  red;
    }
</style>
<span lang="en">Hello</span><br>
<span lang="it">Ciao</span><br>
<span lang="de">Guten Tag</span><br>
<span lang>Onsi nom</span><br>
<span>Здравствуйте</span>

В результате мы получим первые четыре строки красные, а последнюю — цвета по умолчанию. Мы указали в CSS: обращаемся ко всем <span>, имеющим атрибут lang. Довольно важным является деталь, что в выбранные элементы попала также четвёртая строчка Onsi nom с атрибутом без значения. Селектору в данном случае не важно значение атрибута, важно его наличие.

Есть один любопытный момент, касающийся ссылок. Как вы уже могли заметить, браузеры имеют предустановленные стили для ссылок, это чаще всего подчёркивание снизу, синий цвет. Так вот, браузер как правило определят эти стили только для ссылок, имеющих атрибут href. Если вы создадите ссылку без href, стили браузера к ней не применятся:

                

                <a class="theme-link">Смотреть весь модельный ряд</a>

Пока мы не углубились в изучение селекторов атрибутов, стоит сказать, что эти селекторы используются крайне редко, поскольку основа выбора элементов для применения стилей — классы. Селекторы атрибутов могут быть всё же нужны, когда мы выбираем какие-либо <input> в определённом блоке и задаём им одинаковый стиль. Например, когда мы хотим в блоке с формой текстовые input стилизовать одним образом, а input для ввода паролей\телефонов — другим. В таком случае проще обратиться к элементам через атрибут, нежели присваивать каждому отдельные классы. Поэтому знать работу этих селекторов тоже нужно, к тому же у вас легко могут спросить о них на собеседовании, или попросить применить в тестовом задании.

Атрибут со значением

Устанавливает стиль элемента, если задано значение описанного атрибута. Синтаксис написания значения атрибута сходный с синтаксисом HTML. В примере ниже мы раскрашиваем все <span> на итальянском языке в зелёный цвет:

                

                <style>
    span[lang='it']{
        color:  green;
    }
</style>
<span lang="en">Hello</span><br>
<span lang="it">Ciao</span><br>
<span lang="de">Guten Tag</span><br>
<span lang>Onsi nom</span><br>
<span>Здравствуйте</span>

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

Селектор начала значения атрибута ^=

Этот селектор схож с предыдущим, однако он выбирает только те элементы, значение атрибута которых начинается с указанного текста. Наиболее подходящий пример применения данного атрибута — это абсолютные и относительный ссылки на вашем сайте, выделенные различными способами. Внешние ссылки, если вспомнить, начинаются всегда с протокола https://. Следующий пример выделит только вторую ссылку зелёным цветом:

                

                <style>
    a[href^='https']{
        color:  green;
    }
</style>
<a href="contacts">Контакты</a>
<a href="https://maps.ru/coords/432432">Мы на карте</a>

Селектор окончания значения атрибута $=

Аналогичным образом работает селектор значения $=, только сравнивает он не начало, а окончание значения атрибута. Мы приведём пример с классами. Хотя это и не самое лучшее архитектурное решение, оно работает и для примера прекрасно подходит. Иногда нам будет необходимо красить некоторые элементы в определённый цвет. Чтобы не находить каждый раз эти элементы селекторами, мы просто присваиваем им общий класс, отвечающий в наших стилях за цвет. Часто этот класс называется «color-blue» и т.п. Но также у синего цвета есть оттенки, и мы можем их использовать, например создавая класс «color-skyblue». Теперь, чтобы нам обратиться ко всем элементам, так или иначе связанным с синим цветом, мы можем воспользоваться $= селектором. Обратите внимание, что такой способ работает даже со множественными классами, где хотя бы один класс удовлетворяет условию:

                

                <style>
    [class$='blue']{
        color:  blue;
    }
</style>
<p class="color-blue">Обыкновенный синий текст</p>
<p class="color-skyblue">Небесно-голубой цвет</p>
<p class="color-deep color-deepskyblue">Тёмный небесно-голубой цвет</p>

Браузер проверил все классы всех элементов и к тем, у которых хотя бы один класс заканчивается на «blue», применил указанные стили. В результате по условию нам подошли все три параграфа.

Селектор поиска среди значения атрибута *=

Этот селектор уже довольно близок по логике своей работы к JavaScript-функциям. Он находит все элементы, имеющие указанный атрибут, а затем проверяет его значение на наличие условной строки. Если строка присутствует в значении атрибута, то элемент попадает в подборку и к нему применяются стили. Например, нас интересуют ссылки, которые ведут на сайт bbc.com, мы хотим такие ссылки выделить особенным образом, например красной рамкой. Логично предположить, что эти ссылки должны в href содержать значение «bbc.com». Мы этим и воспользуемся, применив селектор *=.

                

                <style>
    a[href*='bbc']{
        border:  1px solid red;
    }
</style>
<a href="https://mail.ru">Mail.ru</a>
<a href="https://rbc.ru">RBC.ru</a>
<a href="https://bbc.com">bbc.com</a>

Данным селектором вы могли бы воспользоваться и в предыдущем примере при работе с классами blue, поскольку *= не привязан ни к началу, ни к концу строки. Селектор *=’blue’ вернул бы нам также все три необходимые элемента.

Селектор одного из значений атрибута ~=

Селектор ~= вряд ли вы будете когда-либо использовать, однако знать про его существование следует. Этот селектор возвращает элемент, если у его атрибута имеется указанное значение. Поскольку сравнение HTML значения атрибута и указанного в CSS идёт по строкам, действие этого селектора аналогично действию *=. Самый удачный пример может быть взят с MDN, он касается текстовых полей и их lang. Мы выделяем синим цветом только те поля, которые имеют в атрибуте lang значение «en-us»:

                

                <style>
    span[lang~='en-us']{
        color: blue;
    }
</style>
<span lang="en-gb en-au en-nz">Hello world!</span><br>
<span lang="en-gb en-us en-au">Hello world!</span><br>
<span lang="en-ca en-au en-nz">Hello world!</span>

Селектор похожего значения атрибута |=

Этот селектор выбирает те элементы, значения атрибутов которых в точности соответствуют указанному, или значения которых начинаются с той же строки, но разделены дефисом (-). Наиболее удачный (а возможно и единственный во всём Вебе) приведён на MDN. В нём мы выбираем и выделяем только те строки, которые написаны на китайском языке, и не важно, на традиционном (TW) или на упрощённом (CN):

                

                <style>
    div[lang|="zh"]{
        color: red;
    }
</style>
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>

Вы могли заметить, что к последней строке стиль не применился. Это и логично, ведь мы выбираем только атрибут lang, тогда как для последнего div задан пользовательский атрибут «data-lang». Хотя они и имеют что-то общее, это не одно и то же. Подробнее про пользовательские атрибуты будет рассказано в будущих уроках.

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

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

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

                

                <style>
    span[lang="it"][class*="sky"]{
        color: red;
    }
</style>
<span lang="it" class="color-blue">Ciao</span><br>
<span lang="it" class="color-skyblue">Arrivederci</span><br>
<span lang="it" class="color-deepskyblue">Buono Serata</span>

Мы объединили селекторы по атрибуту, выбрав <span>,у которых атрибут lang="it" и хотя бы один класс, содержащий строку «sky». Как видите, таковых элементов оказалось два, цвет их шрифта стал красным.

Вы не найдёте в Вебe много информации и примеров по конкатенации атрибутов, и это вполне понятно: производить выборку таким образом нет необходимости, куда проще и понятнее просто присвоить нужным элементам классы. Никогда не забывайте, что после вас код, возможно, достанется другим разработчикам, и им придётся его поддерживать. Это значит, что код должен быть простым и понятным. Кроме того, что это сэкономит их время и пойдёт плюсом вам в карму, это ещё и зарекомен