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 при наведении

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии