Селекторы в css3
Селекторы позволяют выбрать нужный Вам элемент указав сочитание класов, их порядок порядок в документе....
апра
| Селектор | Пример | Описание примера |
|---|---|---|
| .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://website'] |
Починається на вказаний адрес. Вибере цей елемент: А цей НЕ вибере: |
| [attribute$=value] | img[src$='.png'] |
Закінчується на вказаний формат. Вибере цей елемент: А цей НЕ вибере: |
| [attribute*=value] | a[href*='google'] |
Все де зустрічається данні символи. Вибере цей елемент: А цей НЕ вибере: |
| [attribute*=value] | [class*='bg-'] | Выбор всех элементов с класом который содержит (bg-) |
| [attribute*=value] | [id*='bg-'] | Выбор всех элементовс ID который содержит (bg-) |
|
Выбор неактивного инпута типа submit | |
| p.class1[title='Назва спливаючої підказки'] | Вибере елемент р з класом "class1" і тітлом що співпадає | |
~ - набор слов разделённых пробелами, одно из которых в точности равно
^ - начинается
$ - заканчивается
| - в точности равно или начинаться с