---
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>&gt;</code> combinator selects nodes that are direct children of the first element.<br>
	<strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> &gt; <var>B</var></code><br>
	<strong>Example:</strong> <code>ul &gt; 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>&gt;</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>