0:00
Итак, мы рассмотрели с вами, как вообще устроен синтаксис CSS,
и настало время поговорить о том, какие вообще селекторы бывают.
Первый тип селекторов, который мы с вами рассмотрим — это селекторы тегов.
На самом деле, мы уже пользовались селекторами тегов в предыдущем видео.
И с ними нет ничего сложного.
Селектор тега выглядит точно так же, как пишется тег в HTML'е.
Если вы хотите выбрать все заголовки первого уровня,
вы просто пишете в CSS селектор h1, как и тег.
Поэтому мы идем дальше,
и давайте рассмотрим с вами селекторы классов и идентификаторов.
На самом деле, для многих из вас селекторы классов и идентификаторов будут
одними из основных способов выбирать элементы в CSS,
то есть это самая крутая возможность, которая будет у вас.
Давайте сразу же рассмотрим пример.
У нас есть вот такой вот HTML.
Здесь мы у div'а задали два класса: heading и red.
И в CSS мы пишем следующим образом: div.heading, и задаем какие-то стили.
Данный CSS-селектор означает: выбери на странице все div'ы с классом heading.
Соответственно, нашему элементу с классом heading
и red будет задан размер шрифта 50px.
Ниже мы выбираем все элементы с классом red,
все div'ы с классом red, и задаем красный цвет.
Тут достаточно все понятно.
Итоговый результат будет выглядеть так: мы увидим красный текст
размером шрифта в 50px.
Давайте посмотрим на чуть более сложный пример, добавим здесь еще один элемент,
но у него будет только класс red.
В данном случае к этому элементу не применится правило для div'ов с классом
heading, то есть первый элемент у нас будет размером 50px и красного цвета,
а второй элемент просто красного цвета, и разница эта видна даже на экране.
Давайте пойдем чуть-чуть дальше и рассмотрим,
как устроены селекторы идентификаторов.
Выглядят они точно так же, как селекторы классов,
но вместо символа «.» мы используем символ «#».
В данном примере мы выбираем все div'ы с идентификатором heading и задаем им также
размеры 50px и все div'ы с идентификатором red и задаем им красный цвет.
Что мы получим в результате в данном примере, как вы думаете?
На самом деле, ничего — все потому,
что на предыдущих лекциях мы вам уже рассказывали о том,
что идентификатор у элемента может быть только один.
Но в данном случае этот идентификатор, он валидный и корректный,
просто мы в имени идентификатора использовали символ пробела.
Для того чтобы в CSS использовать символ пробела как символ в идентификаторе,
его нужно будет экранировать.
Но, вообще, этим лучше не пользоваться, так как так не принято писать CSS.
Рассмотрим валидный пример, который будет работать в браузере.
Здесь у нас есть div с идентификаторов red, те же самые CSS-стили, но
результирующий итог будет красного цвета, то есть в данном случае CSS применится.
Классическая дилемма начинающих верстальщиков заключается в вопросе «Что
же выбрать: селекторы классов или селекторы идентификаторов?».
Мы рекомендуем вам всегда использовать селекторы классов.
Почему?
Ответ на этот вопрос можно, конечно же,
показать в виде такой вот забавной картинки, но все гораздо проще.
Вы никогда не застрахованы от ситуации, при которой у вас элемент, который
изначально был уникальным на странице и который вы выбирали с помощью селекторов и
идентификаторов, завтра не получит какое-то дополнительное оформление,
которое немножечко отличается от заданного на разных страницах.
Или, например, этот элемент перестанет быть уникальным.
В практике «Яндекса» такие примеры случались, и, именно исходя из
этой практики, мы вывели правило всегда пользоваться селекторами классов.
Жизнь же немножечко расставила все по своим местам,
и сейчас мы применяем в CSS классы, для того чтобы визуально стилизовать элементы,
то есть в CSS, а идентификаторам осталась функция логических или
функциональных элементов на странице, то есть, например,
если мы хотим связать элементы форм, input'ы, с метками, или,
например, мы хотим завязаться на какие-то действительно уникальные контейнеры,
которые находятся на странице из Javascript'а.
В верстке есть селектор, который позволяет выбрать все элементы.
Он так и называется: универсальный селектор.
Он выглядит очень просто: *.
Таким образом, в данном примере, если мы напишем * { color: red; },
то красный цвет будет и у заголовка второго уровня, и у div'а, и у параграфа.
Здесь стили немножко отличаются, в частности заголовок выровнен по центру,
div выровнен по центру, а параграф — по левому краю, но это потому,
что у нас заданы здесь еще дополнительные стили, не обращайте на это внимание.
Самая большая мощь CSS заключается не только в том,
что вы можете выбрать точечные элементы, но вы можете еще и комбинировать
различные селекторы, то есть вы можете задавать сложные условия.
Например, вы можете выбрать все элементы div
определенного класса, мы это уже видели, но на самом деле это
комбинирование двух селекторов: селектора тега и селектора класса.
Вы можете выбрать элементы определенного тега,
которые имеют два класса, то есть в данном случае мы выберем только те параграфы,
которые имеют класс class и class.class2.
Вы можете комбинировать селектор тега с селектором идентификатора.
Вы можете комбинировать селектор идентификатора с селекторами классов.
Вы можете комбинировать селекторы идентификаторов с селекторами
идентификаторов, но только в этом нет смысла,
потому что два идентификатора у элемента не может быть.
Наконец, вы можете комбинировать универсальный селектор с
селектором классов, но в CSS это считается избыточной записью,
вы можете написать ее просто вот так вот: .class.
Последний вид селекторов,
о которых тоже хочется поговорить — это селекторы атрибутов, когда мы
можем выбирать элементы в зависимости от определенного значения атрибута.
Как это сделать?
Ну, для начала мы можем выбрать все элементы,
которые содержат определенный атрибут.
В данном случае мы выбираем все элементы, у которых просто есть атрибут href.
Мы можем выбрать все элементы, которые
содержат определенное значение атрибута или равны определенному значению атрибута.
В данном случае в первом случае мы выбираем только те элементы,
у которых значение атрибута href будет равно данному адресу,
а во втором случае мы выберем все элементы,
у которых значение атрибута href содержит данный адрес.
Мы можем также матчиться на определенную часть атрибута — например, это очень
похоже на регулярное выражение, — мы можем матчиться на начало или конец атрибута.
В данном случае тогда перед символом «=» мы пишем либо «^»,
для того чтобы выбрать начало, либо «$», для того чтобы выбрать конец.
В этом видео мы рассмотрели разные способы выбирать элементы на странице.
Вы можете выбирать элементы с помощью селекторов тегов,
с помощью селекторов идентификаторов и классов,
с помощью универсального селектора и с помощью селекторов атрибутов.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
