CSS селектори
CSS селектори означують елемнти до яких застосовується набір правил CSS.
Прості селектори
- Селектор за типом (Type selector)
- Вибирає всі елементи, що відповідають вказаному імені вузла.
Syntax:eltname
Example:input
буде відповідати будь-якому елементу<input>
. - Селектор за класом (Class selector)
- Вибирає всі елементи, що відповідають вказаному атрибуту
class
.
Syntax:.classname
Example:.index
буде відповідати будь-якому елементу, що має клас "index". - Селектор за ID (ID selector)
- Вибирає елемент, відповідно до його значення атрибуту
id
. В документі повинен бути тільки один елемент з вказаним ID.
Syntax:#idname
Example:#toc
буде відповідати елементу, що має ID зі значенням "toc". - Універсальний селектор (Universal selector)
- Вибирає усі елементи. За бажанням, він може бути обмежений певним простором імен або всім простором імен.
Syntax:*
ns|*
*|*
Example:*
буде відповідати усім елементам документу. - Селектор за атрибутом (Attribute selector)
- Вибирає елементи, відповідно до його значення вказаного атрибуту.
Syntax:[attr]
[attr=value]
[attr~=value]
[attr|=value]
[attr^=value]
[attr$=value]
[attr*=value]
Example:[autoplay]
буде відповідати всім елементам що мають виставлений атрибутautoplay
(в будь яке значення).
Комбінатори
- Комбінатор прилеглого елемента
- Комбінатор
+
вибирає прилеглі елементи, що мають спільного нащадка (рівноправні). Це означає, що наступний елемент слідує безпосередньо за попереднім, і в обидвох спільний предок (обидва класи знаходятся в одному старшому класі).
Синтаксис:A + B
Приклад: під діюh2 + p
підпадуть усі випадки, у яких елемент<p>
знаходиться безпосередньо після елемента<h2>
. - Загальний комбінатор прилеглих елементів
- Комбінатор
~
обирає сусідні елементи. Це значить, що другий елемент слідує за першим (хоча і не обов'язково безпосередньо зразу після нього), і обидва елементи знаходяться в межах лдного предка.
Синтаксис:A ~ B
Приклад:p ~ span
відповідатиме усім випадкам, коли елемент<span>
слідує за елементом<p>
. - Комбінатор прямого нащадка
- Комбінатор
>
обирає усі вузли (теги одного класу), які є прямими нащадками елемента, вказзаного першим.
Синтаксис:A > B
Приклад:ul > li
відповідатиме усім випадкам, коли елемент<li>
буде вкладеним прямо в елемент<ul>
(елемент<ul>
складається з<li>
, що значить, що<li>
є його прямим нащадком. - Комбінатор за нащадками (Descendant combinator)
- Комбінатор
Синтаксис:A B
Приклад:div span
обиратиме усі елементи<span>
, що знаходяться всередині елемента<div>
, хоча і необов'язково напряму (елемент<span>
може бути всередині<table>
, яка знаходиться в<div>
). - Стовпчиковий комбінатор
- Комбінатор
||
вибирає усі вузли, що належать стовпчику.
Синтаксис:A || B
Приклад:col || td
застосовуватиметься до усіх елементів<td>
, що потрапляють в зону застосування<col>
.
Псевдо-класи
- Псевдо-класи роблятть можливим вибір елементів, базуючись на інформаціїї, що не знаходиться в дереві елементів.
- Приклад:
a:visited
застосовуватиметься для усіх<a>
, що були відвідані користувачем.
Псевдо-елементи
- Псевдо-елементи представляють собою об'єкти, що не включені до HTML.
- Приклад:
p::first-line
застосовуватиметься лише до першої стрічки елементів<p>
.
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4 | Working Draft | Added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes |
Selectors Level 3 | Recommendation | Added the ~ general sibling combinator and tree-structural pseudo-classes.Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors |
CSS Level 2 (Revision 1) | Recommendation | Added the > child and + adjacent sibling combinators.Added the universal and attribute selectors. |
CSS Level 1 | Recommendation | Initial definition. |
See the pseudo-class and pseudo-element specification tables for details on those.