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 (в будь яке значення).

Комбінатори

Adjacent sibling combinator

The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
Syntax: A + B
Example: h2 + p will match all <p> elements that directly follow an <h2>.

General sibling combinator

The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p>.

Child combinator

The > combinator selects nodes that are direct children of the first element.
Syntax: A > B
Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.

Комбінатор за нащадками (Descendant combinator)

The   (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
Example: div span will match all <span> elements that are inside a <div> element.

Column combinator 

The || combinator selects nodes which belong to a column.
Syntax: A || B
Example: col || td will match all <td> elements that belong to the scope of the <col>.

Pseudo-classes

Pseudo-classes allow the selection of elements based on state information that is not contained in the document tree.

Example: a:visited will match all <a> elements that have been visited by the user.

Pseudo-elements

Pseudo-elements represent entities that are not included in HTML.

Example: p::first-line will match the first line of all <p> elements.

Specifications

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

Див також

• CSS Specificity