Відмінності між версіями «CSS селектори»
Матеріал з Вікі ЦДУ
м |
43013 (обговорення • внесок) |
||
(не показані 37 проміжних версій 12 учасників) | |||
Рядок 1: | Рядок 1: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
− | ! | + | !Шаблон |
− | ! | + | !Значення |
− | ! | + | !Рівень |
|- | |- | ||
|E | |E | ||
− | | | + | |елемент типу Е |
|1 | |1 | ||
|- | |- | ||
− | |E:link E:visited | + | |E:link E:visited |[[CSS селектор E:link E:visited|E:link E:visited]] |
− | | | + | |псевдо-клас :link використовується для виділення посилань, на які ще не клацнули |
+ | псевдо-клас :visited використовується для виділення відвіданих посилань | ||
|1 | |1 | ||
|- | |- | ||
− | |E:active E:hover E:focus | + | |[[E:active E:hover E:focus|E:active E:hover E:focus]] |
− | | | + | |елемент типу Е протягом дій користувача |
|1 | |1 | ||
|- | |- | ||
− | |E::first-line | + | |E::first-line |[[CSS селектор E::first-line|E::first-line]] |
− | | | + | |відформатований рядок елементу Е |
|1 | |1 | ||
|- | |- | ||
− | |E::first-letter | + | |E::first-letter |[[CSS селектор E::first-letter|E::first-letter]] |
− | | | + | |перша форматована літера елементу Е |
|1 | |1 | ||
|- | |- | ||
− | |E.warning | + | |E.warning|[[CSS селектор E.warning|E.warning]] |
− | | | + | |елемент E з класом "warning" |
|1 | |1 | ||
|- | |- | ||
− | |E#myid | + | |[[E#myid]] |
− | | | + | |елемент E з ID "myid" |
|1 | |1 | ||
|- | |- | ||
|E F | |E F | ||
− | | | + | |елемент F, що є нащадком елементу E |
|1 | |1 | ||
|- | |- | ||
− | |* | + | |[[*]] |
− | | | + | |будь-який елемент |
|2 | |2 | ||
|- | |- | ||
− | |E[foo] | + | |[[Елемент з атрибутом | E[foo]]] |
− | | | + | |елемент E з атрибутом "foo" |
|2 | |2 | ||
|- | |- | ||
− | |E[foo="bar"] | + | |[[Елемент зі значенням атрибута | E[foo="bar"]]] |
− | | | + | |елемент E, значення атрибуту "foo" якого = "bar" |
|2 | |2 | ||
|- | |- | ||
− | |E[foo~="bar"] | + | |[[Елемент зі списком значень атрибута | E[foo~="bar bar1 bar2"]]] |
− | | | + | |елемент E, значення атрибуту "foo" якого - список розділених пробілом значень, один з яких = "bar" |
|2 | |2 | ||
|- | |- | ||
− | |E[foo | + | |[[Елемент зі значенням атрибута що починається з "en"| E[foo|="en"]]] |
− | | | + | |елемент E, атрибут "foo" якого - список розділених пробілом значень, який починається з "en" |
|2 | |2 | ||
|- | |- | ||
− | |E:first-child | + | |E:first-child |[[E:first-child]] |
− | | | + | |елемент Е, перший дочірній елемент |
|2 | |2 | ||
|- | |- | ||
− | |E:lang(fr) | + | |[[Елемент зі значенням атрибута lang="fr"| E:lang(fr)]] |
− | | | + | |елемент типу E на мові "fr" |
|2 | |2 | ||
|- | |- | ||
− | |E::before | + | |E::before |[[CSS селектор E::before|E::before]] |
− | | | + | |генерувати контент перед елементом Е |
|2 | |2 | ||
|- | |- | ||
− | |E::after | + | |E::after |[[CSS селектор E::after|E::after]] |
− | | | + | |генерувати контент після елементу Е |
|2 | |2 | ||
|- | |- | ||
− | |E | + | |[[CSS селектор нащадок|E::E > F]] |
− | | | + | |елемент F, що є безпосереднім нащадком елементу E |
|2 | |2 | ||
|- | |- | ||
− | |E + F | + | |E + F |[[CSS селектор E::E + F|E::E + F]] |
− | | | + | |елемент типу F, що йде зразу після елементу E |
|2 | |2 | ||
|- | |- | ||
− | |E[foo^="bar"] | + | |[[CSS селектор foo^="bar"|E[foo^="bar"]]] |
− | | | + | |елемент E, значення атрибуту "foo" якого починається точно з рядка "bar" |
|3 | |3 | ||
|- | |- | ||
− | |E[foo$="bar"] | + | |[[CSS селектор foo$="bar"|E[foo$="bar"]]] |
− | | | + | |елемент E, значення атрибуту "foo" якого закінчується рядком "bar" |
|3 | |3 | ||
|- | |- | ||
− | |E[foo*="bar"] | + | |[[CSS селектор foo*="bar"|E[foo*="bar"]]] |
− | | | + | |елемент E, значення атрибуту "foo" якого містить рядок "bar" |
|3 | |3 | ||
|- | |- | ||
− | |E:root | + | |[[CSS селектор E:root|E:root]] |
− | | | + | |псевдоклас, що представляє кореневий елемент документа |
|3 | |3 | ||
|- | |- | ||
− | |E:nth-child(n) | + | |[[CSS селектор E:nth-child(n)|E:nth-child(n)]] |
− | | | + | |n-й дочірній елемент елементу E |
|3 | |3 | ||
|- | |- | ||
− | |E:nth-last-child(n) | + | |[[CSS селектор E:nth-last-child(n)|E:nth-last-child(n)]] |
− | | | + | |n-й з кінця дочірній елемент елементу E |
|3 | |3 | ||
|- | |- | ||
− | |E:nth-of-type(n) | + | |[[CSS селектор E:nth-of-type(n)|E:nth-of-type(n)]] |
− | | | + | |n-й дочірній елемент елементу E визначеного типу |
|3 | |3 | ||
|- | |- | ||
− | |E:nth-last-of-type(n) | + | |[[CSS селектор E:nth-last-of-type(n)|E:nth-last-of-type(n)]] |
− | | | + | |n-й з кінця дочірній елемент елементу E визначеного типу |
|3 | |3 | ||
|- | |- | ||
− | |E:last-child | + | |[[CSS селектор E:last-child|E:last-child]] |
− | | | + | |останній дочірній елемент елементу E |
|3 | |3 | ||
|- | |- | ||
− | |E:first-of-type | + | |[[CSS селектор E:first-of-type|E:first-of-type]] |
− | | | + | |перший дочірній елемент елементу E визначеного типу |
|3 | |3 | ||
|- | |- | ||
− | |E:last-of-type | + | |[[CSS селектор E:last-of-type|E:last-of-type]] |
− | | | + | |останній дочірній елемент елементу E визначеного типу |
|3 | |3 | ||
|- | |- | ||
− | |E:only-child | + | |[[CSS селектор E:only-child|E:only-child]] |
− | | | + | |єдиний дочірній елемент елементу E |
|3 | |3 | ||
|- | |- | ||
− | |E:only-of-type | + | |[[CSS селектор E:only-of-type|E:only-of-type]] |
− | | | + | |єдиний дочірній елемент елементу E визначеного типу |
|3 | |3 | ||
|- | |- | ||
− | |E:empty | + | |[[CSS селектор E:empty|E:empty]] |
− | | | + | |елемент, який не має дітей (включаючі текстові вузли) |
|3 | |3 | ||
|- | |- | ||
− | |E:target | + | |[[CSS селектор E:target|E:target]] |
− | | | + | |:target використовується для вибору та оформлення цільового об'єкта внутрішнього посилання в документі |
|3 | |3 | ||
|- | |- | ||
− | |E:enabled E:disabled | + | |[[CSS селектори E:enabled E:disabled|E:enabled E:disabled]] |
− | | | + | |елемент Е користувацького інтерфейсу, який увімкнено, або вимкнено |
|3 | |3 | ||
|- | |- | ||
− | |E:checked | + | |[[CSS селектор E:checked|E:checked]] |
− | | | + | |елемент Е користувацького інтерфейсу, який відмічено (наприклад радіо-кнопки або прапорці) |
|3 | |3 | ||
|- | |- | ||
− | |E:not(s) | + | |[[CSS селектор E:not(s)|E:not(s)]] |
− | | | + | |елемент Е, який не відповідає простому селектору s |
|3 | |3 | ||
|- | |- | ||
− | |E ~ F | + | |[[CSS селектор E ~ F|E ~ F]] |
− | | | + | |елемент F, який передує елементу Е, незалежно від їх віддаленості один від одного. Обираються усі наступні елементи, на відміну від E + F. |
|3 | |3 | ||
|} | |} | ||
− | + | http://css.yoksel.ru/css-selectors-part2/#attr-contains | |
[[category:Інтернет-програмування|*]] | [[category:Інтернет-програмування|*]] |
Поточна версія на 19:18, 29 жовтня 2016
Шаблон | Значення | Рівень |
---|---|---|
E | елемент типу Е | 1 |
E:link E:visited | псевдо-клас :link використовується для виділення посилань, на які ще не клацнули
псевдо-клас :visited використовується для виділення відвіданих посилань |
1 |
E:active E:hover E:focus | елемент типу Е протягом дій користувача | 1 |
E::first-line | відформатований рядок елементу Е | 1 |
E::first-letter | перша форматована літера елементу Е | 1 |
E.warning | елемент E з класом "warning" | 1 |
E#myid | елемент E з ID "myid" | 1 |
E F | елемент F, що є нащадком елементу E | 1 |
* | будь-який елемент | 2 |
E[foo] | елемент E з атрибутом "foo" | 2 |
E[foo="bar"] | елемент E, значення атрибуту "foo" якого = "bar" | 2 |
E[foo~="bar bar1 bar2"] | елемент E, значення атрибуту "foo" якого - список розділених пробілом значень, один з яких = "bar" | 2 |
E[foo|="en"] | елемент E, атрибут "foo" якого - список розділених пробілом значень, який починається з "en" | 2 |
E:first-child | елемент Е, перший дочірній елемент | 2 |
E:lang(fr) | елемент типу E на мові "fr" | 2 |
E::before | генерувати контент перед елементом Е | 2 |
E::after | генерувати контент після елементу Е | 2 |
E::E > F | елемент F, що є безпосереднім нащадком елементу E | 2 |
E::E + F | елемент типу F, що йде зразу після елементу E | 2 |
E[foo^="bar"] | елемент E, значення атрибуту "foo" якого починається точно з рядка "bar" | 3 |
E[foo$="bar"] | елемент E, значення атрибуту "foo" якого закінчується рядком "bar" | 3 |
E[foo*="bar"] | елемент E, значення атрибуту "foo" якого містить рядок "bar" | 3 |
E:root | псевдоклас, що представляє кореневий елемент документа | 3 |
E:nth-child(n) | n-й дочірній елемент елементу E | 3 |
E:nth-last-child(n) | n-й з кінця дочірній елемент елементу E | 3 |
E:nth-of-type(n) | n-й дочірній елемент елементу E визначеного типу | 3 |
E:nth-last-of-type(n) | n-й з кінця дочірній елемент елементу E визначеного типу | 3 |
E:last-child | останній дочірній елемент елементу E | 3 |
E:first-of-type | перший дочірній елемент елементу E визначеного типу | 3 |
E:last-of-type | останній дочірній елемент елементу E визначеного типу | 3 |
E:only-child | єдиний дочірній елемент елементу E | 3 |
E:only-of-type | єдиний дочірній елемент елементу E визначеного типу | 3 |
E:empty | елемент, який не має дітей (включаючі текстові вузли) | 3 |
E:target | :target використовується для вибору та оформлення цільового об'єкта внутрішнього посилання в документі | 3 |
E:enabled E:disabled | елемент Е користувацького інтерфейсу, який увімкнено, або вимкнено | 3 |
E:checked | елемент Е користувацького інтерфейсу, який відмічено (наприклад радіо-кнопки або прапорці) | 3 |
E:not(s) | елемент Е, який не відповідає простому селектору s | 3 |
E ~ F | елемент F, який передує елементу Е, незалежно від їх віддаленості один від одного. Обираються усі наступні елементи, на відміну від E + F. | 3 |