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)

Комбінатор   (space) обирає всі вузли, що є нащадками першого елемента.
Синтаксис: A B
Приклад: div span обиратиме усі елементи <span>, що знаходяться всередині елемента <div>, хоча і необов'язково напряму (елемент <span> може бути всередині <table>, яка знаходиться в <div>).

Стовпчиковий комбінатор 

Комбінатор || вибирає усі вузли, що належать стовпчику.
Синтаксис: A || B
Приклад: col || td застосовуватиметься до усіх елементів <td>, що потрапляють в зону застосування <col>.

Псевдо-класи

Псевдо-класи роблятть можливим вибір елементів, базуючись на інформаціїї, що не знаходиться в дереві елементів.

Приклад: a:visited застосовуватиметься для усіх <a>, що були відвідані користувачем.

Псевдо-елементи

Псевдо-елементи представляють собою об'єкти, що не включені до HTML.

Приклад: p::first-line застосовуватиметься лише до першої стрічки елементів <p>.

Specifications

See the pseudo-class and pseudo-element specification tables for details on those.

Див також

• CSS Specificity