1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: CSS selectors
slug: Web/CSS/CSS_Selectors
tags:
- CSS
- NeedsTranslation
- Overview
- Reference
- Selectors
- TopicStub
translation_of: Web/CSS/CSS_Selectors
---
<div>{{CSSRef("Selectors")}}</div>
<p class="summary"><span class="seoSummary"><strong>CSS selectors</strong> define the elements to which a set of CSS rules apply.</span></p>
<div class="blockIndicator note">
<p><strong>Note</strong>: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.</p>
</div>
<h2 id="Basic_selectors">Basic selectors</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a></dt>
<dd>Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.<br>
<strong>Syntax:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
<strong>Example:</strong> <code>*</code> will match all the elements of the document.</dd>
<dt><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a></dt>
<dd>Selects all elements that have the given node name.<br>
<strong>Syntax:</strong> <code><var>elementname</var></code><br>
<strong>Example:</strong> <code>input</code> will match any {{HTMLElement("input")}} element.</dd>
<dt><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a></dt>
<dd>Selects all elements that have the given <code>class</code> attribute.<br>
<strong>Syntax:</strong> <code>.<var>classname</var></code><br>
<strong>Example:</strong> <code>.index</code> will match any element that has a class of "index".</dd>
<dt><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a></dt>
<dd>Selects an element based on the value of its <code>id</code> attribute. There should be only one element with a given ID in a document.<br>
<strong>Syntax:</strong> <code>#<var>idname</var></code><br>
<strong>Example:</strong> <code>#toc</code> will match the element that has the ID "toc".</dd>
<dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a></dt>
<dd>Selects all elements that have the given attribute.<br>
<strong>Syntax:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br>
<strong>Example:</strong> <code>[autoplay]</code> will match all elements that have the <code>autoplay</code> attribute set (to any value).</dd>
</dl>
<h2 id="Grouping_selectors">Grouping selectors</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/Selector_list">Selector list</a></dt>
<dd>The <code>,</code> is a grouping method, it selects all the matching nodes.<br>
<strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br>
<strong>Example:</strong> <code>div, span</code> will match both {{HTMLElement("span")}} and {{HTMLElement("div")}} elements.</dd>
</dl>
<h2 id="Combinators">Combinators</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a></dt>
<dd>The <code> </code> (space) combinator selects nodes that are descendants of the first element.<br>
<strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br>
<strong>Example:</strong> <code>div span</code> will match all {{HTMLElement("span")}} elements that are inside a {{HTMLElement("div")}} element.</dd>
<dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></dt>
<dd>The <code>></code> combinator selects nodes that are direct children of the first element.<br>
<strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> > <var>B</var></code><br>
<strong>Example:</strong> <code>ul > li</code> will match all {{HTMLElement("li")}} elements that are nested directly inside a {{HTMLElement("ul")}} element.</dd>
<dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a></dt>
<dd>The <code>~</code> combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.<br>
<strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br>
<strong>Example:</strong> <code>p ~ span</code> will match all {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.</dd>
<dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a></dt>
<dd>The <code>+</code> combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.<br>
<strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br>
<strong>Example:</strong> <code>h2 + p</code> will match all {{HTMLElement("p")}} elements that directly follow an {{HTMLElement("h2")}}.</dd>
<dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> {{Experimental_Inline}}</dt>
<dd>The <code>||</code> combinator selects nodes which belong to a column.<br>
<strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br>
<strong>Example:</strong> <code>col || td</code> will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("col")}}.</dd>
</dl>
<h2 id="Pseudo">Pseudo</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a></dt>
<dd>The <code>:</code> pseudo allow the selection of elements based on state information that is not contained in the document tree.<br>
<strong>Example:</strong> <code>a:visited</code> will match all {{HTMLElement("a")}} elements that have been visited by the user.</dd>
<dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a></dt>
<dd>The <code>::</code> pseudo represent entities that are not included in HTML.<br>
<strong>Example:</strong> <code>p::first-line</code> will match the first line of all {{HTMLElement("p")}} elements.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Selectors")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br>
Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "selector.html")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Added the <code>></code> child and <code>+</code> adjacent sibling combinators.<br>
Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>See the <a href="/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li>
</ul>
|
