# CSS Selector

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

## Basic selectors

**Universal selector**

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

 Syntax: `*` `ns|*` `*|*`

Example: `*` will match all the elements of the document


```
/* Selects all elements */
* {
  color: green;
}
``` 

**Type selector**

Selects all elements that have the given node name. 

Syntax: elementname

 Example: input will match any <input> element.

```

/* All <a> elements. */
a {
  color: red;
}

``` 

**Class selectors**

The CSS class selector matches elements based on the contents of their class attribute.

Syntax: .classname 

Example: .index will match any element that has a class of "index".


```
/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

``` 

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

Syntax: #idname 

Example: #toc will match the element that has the ID "toc".


```
/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

``` 

**Attribute selectors**

The CSS attribute selector matches elements based on the presence or value of a given attribute.

Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 

Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).



```
/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

``` 

## Grouping selectors

**Selector list**

The , selector is a grouping method that selects all the matching nodes. 

Syntax: A, B

 Example: div, span will match both <span> and <div> elements.


```

/* Selects all matching elements */
span,
div {
  border: red 2px solid;
}


``` 

## Combinators

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


```

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

``` 

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


```
/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

``` 

**Adjacent sibling combinator**

The + combinator matches the second element only if it immediately follows the first element.

 Syntax: A + B

 Example: h2 + p will match the first <p> element that immediately follow an `<h2>` element.


```
/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

``` 

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


```
/* Table cells that belong to the "selected" column */
col.selected || td {
  background: gray;
}

``` 

## Pseudo ##

**Pseudo classes**

The : pseudo 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.


```
/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

``` 

**Pseudo elements**

The :: pseudo represent entities that are not included in HTML.

 Example: p::first-line will match the first line of all <p> elements.



```
/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

```