Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

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

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.

Див також

Мітки документа й учасники

Зробили внесок у цю сторінку: mdnwebdocs-bot, pupenasan
Востаннє оновлена: mdnwebdocs-bot,