Язык описания внешнего вида документа CSS постоянно развивается. Со временем растут не только его мощность и функциональность, повышаются также гибкость и удобство использования.
CSS selectors
Начнем разбираться. Откройте любой учебник CSS, как минимум один раздел в нем будет посвящен видам селекторов. В этом нет ничего удивительного, поскольку они являются одним из самых удобных способов управления контентом страницы. С их помощью можно взаимодействовать с абсолютно любыми элементами HTML. Сейчас существует 7 видов селекторов:
- для тегов;
- для классов;
- для ID;
- универсальные;
- атрибутов;
- для взаимодействия с псевдоклассами;
- для управления псевдоэлементами.
Синтаксис прост. Чтобы научиться использовать CSS selectors, достаточно прочитать о них. Какой вариант лучше выбрать для контроля контента в вашем случае? Попробуем разобраться.
Селекторы тэгов
Это максимально простой вариант, который не требует особых знаний для записи. Чтобы управлять тегами, нужно использовать их название. Предположим, что «шапка» вашего сайта обернута в тег <header>. Для управления ею в CSS нужно использовать селектор header {}.
Достоинства - простота использования, универсальность.
Недостатки - полное отсутствие гибкости. В вышеописанном примере будут выбраны сразу все теги header. А что если нужно управлять только одним?
Селекторы класса
Самый распространенный вариант. Предназначен для управления тегами с атрибутом class. Предположим, в вашем коде есть три блока <div>, каждому из которых нужно задать определенный цвет. Как это сделать? Стандартные CSS selectors по тегам не подойдут, они указывают параметры для всех блоков сразу. Выход прост. Назначьте элементам класс. Например, первый div получил class=’red’, второй – class=’blue’, третий – class=’green’. Теперь их можно выбрать, используя таблицы CSS.
Синтаксис таков: указываем точку («.»), после которой пишем название класса. Чтобы управлять первым блоком, используем конструкцию .red. Вторым – .blue и так далее.
Важно! Рекомендуется использовать понятные значения атрибута class. Дурным тоном считается использование транслита (например, krasiviy-blok) или случайных комбинаций букв/цифр (ojfh834871). В таком коде вы обязательно запутаетесь, не говоря уже о том, с какими трудностями придется столкнуться тем, кто будет заниматься проектом после вас. Оптимальный вариант – использовать какую-нибудь методологию, вроде БЭМ.
Достоинства - довольно высокая гибкость.
Недостатки - у нескольких элементов может быть один и тот же класс, а значит, они будут редактироваться одновременно. Проблема решается использованием методологии, а также наследованием препроцессоров. Обязательно освойте less, sass или какой-нибудь другой препроцессор, они сильно упростят работу.
Селектор по ID
Насчет этого варианта мнения верстальщиков и программистов неоднозначны. Некоторые учебники CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Однако многие специалисты активно расставляют их по всей разметке. Решать вам. Синтаксис таков: символ решетки («#»), затем имя блока. Например, #red.
ID отличается от класса по нескольким параметрам. Во-первых, на странице не может быть двух одинаковых ID. Им назначаются уникальные имена. Во-вторых, такой селектор обладает более высоким приоритетом. Это значит, что если вы зададите блоку класс red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим.
Достоинства - можно управлять конкретным элементом, не обращая внимания на стили для тегов и классов.
Недостатки - легко запутаться в большом количестве ID и class.
Важно! Если вы пользуетесь методологией БЭМ (или ее аналогами), ID вам, в общем-то, не нужны. Такая техника верстки подразумевает использование уникальных классов, что гораздо удобнее.
Универсальный селектор
Синтаксис: знак зведочки («*») и фигурные скобки, т. е. *{}.
Используется для назначения определенных атрибутов сразу всем элементам страницы. Когда это может пригодиться? Например, если вы хотите задать странице свойство box-sizing: border-box. Может использоваться не только для управления всеми компонентами документа, но и для контроля всеми дочерними элементами определенного блока, например, div *{}.
Достоинства - можно управлять большим количеством элементов одновременно.
Недостатки - недостаточно гибкий вариант. Вдобавок, использование этого селектора в некоторых случаях замедляет работу страницы.
По атрибутам
Дают возможность управлять элементом с конкретным атрибутом. Например, у вас есть несколько тегов input с разным атрибутом type. Один из них – text, второй – password, третий – number. Конечно, можно задать каждому классы или ID, но это не всегда удобно. CSS selectors по атрибутам дают возможность указать значения для определенных тегов с максимальной точностью. Например, вот так:
input[type=’text’]{}
Этот селектор атрибутов выберет все input с типом text.
Инструмент довольно гибкий, его можно использовать с любыми тегами, у которых возможно наличие атрибутов. Но и это еще не все! В спецификации CSS есть возможность управлять элементами даже с большим удобством!
Представим, что на вашей странице есть input с атрибутом placeholder=“Введите имя“ и input placeholder=“Введите пароль“. Их также можно выбрать с помощью селектора! Для этого используется следующая конструкция:
input[placeholder=“Введите имя“]{} или input [placeholder=“Введите пароль“]
Возможна более гибкая работа с атрибутами. Допустим, у вас есть несколько тегов с похожими атрибутами title (скажем, «каспийский» и «каспийская»). Чтобы выбрать оба, используем следующие селекторы:
[title*=“каспийск“]
CSS выберет все элементы, в тайтле которых имеются символы «каспийск», т. е. и «каспийский», и «каспийская».
Также можно выбирать теги, атрибуты которых начинаются с определенных символов:
[title^="нужный вам символ"] {}
или заканчиваются ими:
[title$="нужный символ"] {}.
Достоинства - максимальная гибкость. Можно выбирать любые существующие элементы страницы без возни с классами.
Недостатки - используется относительно редко, только в специфических случаях. Многие верстальщики предпочитают методологии, поскольку указать класс бывает проще, чем расставлять многочисленные квадратные скобки и знаки «равно». Вдобавок, эти селекторы не работают в Internet Explorer версии 7 и ниже. Впрочем, кому сейчас нужны старые Internet Explorer?
Селекторы псевдоклассов
Псевдокласс обозначает состояние элемента. Например, :hover – то, что происходит с частью страницы при наведении курсора, :visited – посещенная ссылка. Сюда же входят элементы вроде :first-child и :last-child.
Этот тип селекторов активно применяется в современной верстке, поскольку благодаря ему можно сделать страницу «живой» без применения JavaScript. Например, вы хотите сделать так, чтобы при наведении на кнопку с классом btn ее цвет менялся. Для этого используем следующую конструкцию:
.btn:hover {
background-color: red;
}
Для красоты можно указать в основных свойствах этой кнопки свойство transition, например, в 0,5s – в таком случае кнопка будет краснеть не мгновенно, а в течение полусекунды.
Достоинства - активно используются для «оживления» страниц. Просты в применении.
Недостатки - их нет. Это действительно удобное средство. Однако неопытные верстальщики могут запутаться в обилии псевдоклассов. Проблема решается учебой и практикой.
Селекторы псевдоэлементов
«Псевдоэлементы» – это те части страницы, которых нет в HTML, но ими все равно можно управлять. Ничего не поняли? Все проще, чем кажется. Например, вы хотите сделать первую букву в строке большой и красной, оставив прочий текст маленьким и черным. Конечно, можно заключить эту букву в span с определенным классом, но это долго и скучно. Гораздо проще выделить весь абзац и использовать псевдоэлемент ::first-letter. Он дает возможность управлять внешним видом первой буквы.
Существует довольно большое количество псевдоэлементов. Перечислить их в рамках одной статьи вряд ли получится. Вы можете найти соответствующую информацию в любимом поисковике.
Достоинства - дают возможность гибко настраивать внешний вид страницы.
Недостатки - новички в них часто путаются. Многие селекторы этого типа работают только в определенных браузерах.
Подведем итог
Селектор – мощное средство контроля потока документа. Благодаря ему можно выбрать абсолютно каждый компонент страницы (даже существующий лишь условно). Обязательно выучите все имеющиеся варианты или хотя бы запишите их. Это особенно важно, если вы создаете сложные страницы с современным дизайном и большим количеством интерактивных элементов.
