<p>CSS selectors define the elements to which a set of CSS rules apply.</p>
<h2 id="heading-id-selector">ID selector</h2>
<p>Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.</p>
<pre><code><span class="hljs-selector-id">#id-selector</span> {
  <span class="hljs-comment">/*   */</span>
}
</code></pre><h2 id="heading-class-selector"><strong>Class selector</strong></h2>
<p>Selects all elements that have the given class attribute. Syntax: .classname Example: .index will match any element that has a class of "index".</p>
<pre><code><span class="hljs-selector-class">.class-selector</span> {
<span class="hljs-comment">/*        */</span>
}
</code></pre><h2 id="heading-tag-selector">Tag selector</h2>
<p>Selects all elements that have the given node name. Syntax: elementname Example: input will match any  element.</p>
<pre><code><span class="hljs-selector-tag">body</span> {
<span class="hljs-comment">/*        */</span>
}
</code></pre><h2 id="heading-attribute-selector"><strong>Attribute selector</strong></h2>
<p>Selects all elements that have the given attribute.</p>
<pre><code><span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[href$=<span class="hljs-string">".org"</span>]</span> {
  <span class="hljs-attribute">color</span>: red;
}
</code></pre><h2 id="heading-universal-selector"><strong>Universal selector</strong></h2>
<p>Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.</p>
<pre><code>* {
  <span class="hljs-attribute">color</span>: green;
}
</code></pre>

CSS selectors define the elements to which a set of CSS rules apply.


## ID selector

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.


```
#id-selector {
  /*   */
}
``` 

## **Class selector**
Selects all elements that have the given class attribute. Syntax: .classname Example: .index will match any element that has a class of "index".


```
.class-selector {
/*        */
}
``` 

## Tag selector
Selects all elements that have the given node name. Syntax: elementname Example: input will match any <input> element.


```
body {
/*        */
}
``` 

## **Attribute selector**
Selects all elements that have the given attribute.


```
a[href$=".org"] {
  color: red;
}
``` 

## **Universal selector**
Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.


```
* {
  color: green;
}
``` 


CSS Selectors

ID selector

Class selector

Tag selector

Attribute selector

Universal selector