CSS селекторы
Селектор указывает к какому элементу (или элементам) будут применены стили.
Синтаксис:
selector {
// styles
}
Типы селекторов
Универсальный селектор ‘*’
Указывает на все элементы на странице
Селекторы тегов ‘body, div, p, ...’
p { }
все параграфы
button { }
все кнопки
Селектор по классу ‘.class-name’
.block { }
все элементы с классом ‘block’
Селектор по идентификатору ‘#id-name’
Имя идентификатора должно быть уникальным на странице!
#block { }
Элемент с идентификатором ‘block’
Селекторы по атрибуту ‘[attr=value]’
p[class] { }
все параграфы у которых есть атрибут class
https://jsfiddle.net/0b7oLx2p/1/
p[class="text"] { }
все параграфы у которых указан только один класс с именем ‘text’
https://jsfiddle.net/0b7oLx2p/2/
p[class~="text"] { }
все параграфы у которых в названии класса есть слово 'text'
https://jsfiddle.net/0b7oLx2p/4/
p[class^="text"] { }
все параграфы у которых класс ‘text’ указан первый или первый с префиксом ‘text-’
https://jsfiddle.net/0b7oLx2p/5/
p[class$="text"] { }
все параграфы у которых класс ‘text’ указан последний
https://jsfiddle.net/0b7oLx2p/6/
p[class|="text"] { }
все параграфы у которых указан только один класс с именем ‘text’ или с префиксом ‘text-’
https://jsfiddle.net/0b7oLx2p/7/
p[class*="text"] { }
все параграфы у которых в названии класса есть подстрока ‘text’
https://jsfiddle.net/0b7oLx2p/8/
Если добавить символ 'i' перед закрывающейся скобкой, то значение атрибута сравнивается без учета регистра.
a[href="link" i] { }
все ссылки у которых указан атрибут href=”link”, в котором ссылка может быть в любом регистре. * Не работает в IE
https://jsfiddle.net/0b7oLx2p/9/
Комбинирование селекторов
Можно указать сразу несколько селекторов без пробелов чтобы получить элемент по нескольким критериям.
p.text#text { }
все параграфы у которых указан класс и идентификатор с именем ‘text’
https://jsfiddle.net/0b7oLx2p/10/
Отношение селекторов
.wrapper .block { }
все элементы с классом ‘block’ являющееся потомками элемента с классом ‘wrapper’
https://jsfiddle.net/0b7oLx2p/13/
.wrapper > .block { }
все элементы с классом ‘block’ являющееся непосредственными потомками элемента с классом ‘wrapper’
https://jsfiddle.net/0b7oLx2p/14/
.wrapper ~ .block { }
все элементы с классом ‘block’, которые расположенные после элемента с классом ‘wrapper’ на том же уровне
https://jsfiddle.net/0b7oLx2p/16/
.wrapper + .block { }
первый элемент с классом ‘block’, который расположен после элемента с классом wrapper на том же уровне
https://jsfiddle.net/0b7oLx2p/17/
Выбор псевдоэлемента
Для выбора псевдоэлемента используется ::
selector::pseudo-element { }
p::before { }
задать стили для псевдоэлемента before у параграфа
Выбор псевдокласса
Для выбора псевдокласса используется :
div:first-child { }
задание стилей для первого потомка div
div:hover { }
задание стилей для div при наведении