Селекторы позволяют выбрать нужный Вам элемент указав сочетание классов, их порядок порядок в документе….
| Селектор | Пример | Описание примера |
|---|---|---|
| .class | .test | Выбирает все элементы с классом test(class = «test»). |
| #id | #test | Выбирает все элементы с id =»test». |
| * | * | Выбирает все элементы (универсальный селектор). Селектор также может выбрать все элементы внутри другого элемента. |
| element | h2 | Выбирает все заголовки второго уровня — <h2>. |
| selector,selector | h2, h3 | Выбирает все элементы <h2>и <h3>. |
| selector selector | h2 i | Выбирает все элементы <i>внутри элементов <h2>. |
| selector > selector | p > a | Выбирает все дочерние элементы <a>, у которых родитель — элемент <p>. |
| selector + selector | h2 + p | Выбирает все элементы <p>, которые расположены сразу же после элементов <h2>. |
| selector ~ selector | h2 ~ p | Выбирает все элементы <p>, которые следуют сразу же за элементом <h2>, а также все элементы <p>, которые находятся на одном уровне вложенности. |
| [attribute] | [title] | Выбирает все элементы с атрибутом title. |
| [attribute = value] | [type=password] | Выбирает все элементы которое точно содержит»password» |
| [attribute=value][attribute2=value2] | [src=’logo.png’][alt=’image’] | Выбирает все элементы, которые имеют указанные атрибуты (src и alt) со значениями этих атрибутов logo.png для первого и imageдля второго. |
| [attribute ~ = value] | [title~= home] | Выбирает все элементы с атрибутом title, разделённых пробелами, одно из которых в точности равно»home». |
| [attribute|= value] | [title|= home] | Выбор всех элементов с атрибутом title, значение которого начинается или точно равно с «home». |
| [attribute^=value>] | a[href^ = «http»] | Выбирает каждый элемент <a>, содержащий атрибут href, значение которого начинается с «http». |
| [attribute$=value] | a[href$= «.mp3»] | Выбирает каждый элемент <a>, значение атрибута hrefкоторого заканчивается на «.mp3». |
| [attribute*=value] | [title*=»home»] | Выбор всех элементов с атрибутом title, в значение которого содержится «home». |
| [attribute*=value] | [class*=’bg-‘] | Выбор всех элементов с класом который содержит (bg-) |
| [attribute*=value] | [id*=’bg-‘] | Выбор всех элементов с ID который содержит (bg-) |
input[type=submit]:disabled { background-color: #4a4a4a; } | Выбор неактивного инпута типа submit |
~ — набор слов разделённых пробелами, одно из которых в точности равно
^ — начинается
$ — заканчивается
| — в точности равно или начинаться с