--- 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>