# The A - Z of CSS Selectors

## What is a CSS selector?
HTML code without styling is boring and looks horrible, CSS allows us to style the HTML skeleton and bring it to life. CSS selectors help us to select the part we want to style. It offers a variety of ways to select any given HTML component. 
```CSS
body {
        background-color: #d4d4d4;
}
```
In the above example `body` is the CSS Selector, `background-color` is the Css property and `#d4d4d4` is the value for the CSS property

We will discuss the various types of CSS selectors in this Article.

## Basic Selectors
The Basic Selectors are used much more than other Selectors.  They are simple and easy to understand. Let us go over them.

### Type Selector
Type Selector uses the HTML tags to target the field we want to style
 HTML
```html
<h1>This is Heading 1</h1>
```
 CSS
```css 
h1{ 
  color: red
}
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658651258092/xEMaEV-w4.png align="left")
`h1` here is the ***HTML*** tag and we are changing the text color by targeting the `h1` tag
### Class Selector
Class Selectors are widely used and can be very useful to manipulate the style of the html, it is an efficient way to style elements. We can add multiple classes to same tag separated by a space like `<p class="classh2 classbold">This is a paragraph</p>`. When we want to target the classes in CSS we can use `"."` without the quotes before the class name. Example
 HTML
```html
<h1>This is Heading 1</h1>
<h2 class="classh2"> This is Heading 2</h2>
```
 CSS
```css 
.classh2{ 
  color: blue
}
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658651429629/3X1i0jpjA.png align="left")

We can also assign the `class`to other elements and the styles of the `class` will be applied to the other elements as well. 
 HTML
```html
<h1 class="classh2">This is Heading 1</h1>
<h2 class="classh2"> This is Heading 2</h2>
```
 CSS
```css 
.classh2{ 
  color: blue
}
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658651588435/he208hCTy.png align="left")
 Here we can see `classh2` styles being applied to h1 after we gave it the class of `classh2`
### Id Selectors
Id selectors are used less compared to the class selector. Id selectors should have unique ids. You can have the same id at multiple places but it's frowned upon. To Select element via Id we need to use `#` sign before the name of the id as opposed to `.` for classes. Example
 HTML
```html
<h1 class="classh2">This is Heading 1</h1>
<h2 id="idforh2"> This is Heading 2</h2>
```
 CSS
```css 
.classh2{ 
  color: blue
}
#idforh2{
 color: red
}
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658652419425/LKBbmicbL.png align="left")

### Attribute Selectors
Now we arrived at the Attribute Selectors. In this article we will be using the Anchor tag `<a></a>`. CSS Attribute Selector matches elements based on the presence or value of the attribute mentioned in css file.

`[attr]` This just targets the tag with the given attribute
 HTML
```html
  <a href="" title="some">Anchor tag with attribute title</a>
```
 CSS
```css 
a[title] {
    background-color: purple;
    
  }
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658656350493/dAcq-egsd.png align="left")

`[attr=value]` 
This targets the attribute whose *value* is exactly equal to the *value* mentioned
 HTML
```html
  <a href="notepad.com">Anchor tag with href matching notepad.com</a>
```
 CSS
```css 
 a[href="notepad.com"] {
    background-color: green;
  }
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658656530094/b_1DdQ9qG.png align="left")

`[attr*=value]` 
This targets the attribute which has at least one occurrence of *value* in the mentioned *attr*
 HTML
```html
  <a href="example">Anchor tag with href containing example</a>
```
 CSS
```css 
 a[href*="example"] {
    background-color: rgb(51, 0, 128);
  }
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658656985953/qzg-YxZRb.png align="left")

`[attr$=value]` 
This targets the attribute which has the *value* as a suffix
 HTML
```html
   <a href="www.random.org">Anchor tag ending with .org</a>
```
 CSS
```css 
 a[href$=".org"] {
    background-color: rgb(128, 0, 0);
  }
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658657192197/hLmosQ5gw.png align="left")
`[attr~=value]` 
This targets the attribute which has the *value* in a set of white-space separated *values*
 HTML
```html
   <a href="some.com" class="logo anchor blackbox">Anchor tag with class of logo</a>
```
 CSS
```css 
 a[class~="logo"] {
    background-color: rgb(255, 0, 170);
  }
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658657316624/GDTMVuMe6.png align="left")
Now you have an idea of how the attribute selectors work. If you want to dig deeper into  Attribute selectors, please refer to [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)

### Group Selectors
Group selectors are useful when we want to apply one style to multiple elements, we can use mention multiple attribute/tag names separated by a `,` to use the group selector method of selecting the HTML elements.


 HTML
```html
   <h1>This is Heading 1</h1>
    <h2 class="testing">This is Heading 2</h2>
    <h3 id="testing2">This is Heading 3</h3>
    <h4>This is Heading 4</h4>
    <h5>This is Heading 5</h5>
    <h6>This is Heading 6</h6>
```
 CSS
```css 
h1,.testing,#testing2,h4,h5,h6{
    background-color: aqua;
}
```
 Output


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658658084260/1DVZGJWPR.png align="left")

As you have seen in `h2` and `h3`, targeting can be mixed with other attributes as well when using group selectors

### Combinator Selectors
#### Descendant Combinator
The descendant combinator is represented by a space character like `div p`. Here the parent element is `div` and the descendant is the `p` tag. This combinator will match all the `p` tags inside of the `div`
 HTML
```html
   <ul>
        <li>
          <div>Item 1</div>
          <ul>
            <li>Subitem A</li>
            <li>Subitem B</li>
          </ul>
        </li>
        <li>
          <div>Item 2</div>
          <ul>
            <li>Subitem A</li>
            <li>Subitem B</li>
          </ul>
        </li>
      </ul>
```
 CSS
```css 
 li {
    list-style-type: disc;
  }
  
  li li {
    list-style-type: circle;
    background-color: aqua;
  }
```
 Output


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658659395304/ltzpvnSyW.png align="left")
  
#### Child Combinator

This might seem like the descendant combinator but its not. There is a difference, as the child combinator targets only those elements which are a direct child of the first parent element. It is represented by `>`
 HTML
```html
   <div>
        <span>Span #1, in the div.<br>
          <span>Span #2, in the span that's in the div.</span><br>
        </span>
      </div>
      <span>Span #3, not in the div at all.</span>
```
 CSS
```css 
  span {
    background-color: aqua;
  }
  
  div > span {
    background-color: yellow;
  }
```
 Output


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658659733452/9ifyJMXgK.png align="left")

An easy way to remember the difference between the two would be to consider the English meaning of the words;
- Our children are both our child and descendant
- Our grandchildren are just our descendants.

Another point to note here is that for very large websites the child selector is faster compared to descendant selectors as you have over 1000 of DOM elements.

### General Sibling Combinator

This is represented by `~`.  It can be used to target the second element that comes after the first element. `div~p` will target all the `p` that comes after the `div` element.
 HTML
```html
<p><strong>This paragraph will not be selected.</strong></p>

<h1>The break Point</h1>

<p><strong>This paragraph will be selected.</strong></p>

<p><strong>And this paragraph will also be selected.</strong></p>
```
 CSS
```css 
    h1{
        background-color: aqua;
  }
    h1 ~ p {
    background-color: #FEF0B6;
    padding: 5px;
  }
```
 Output

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658660627500/WQnFu3YQO.png align="left")

### Adjacent Sibling Combinator
The adjacent sibling combinator `+` separates two selectors and targets the second element only if it *immediately* follows the first element and both are children of the same parent element.

 HTML
```html
<p>This example demonstrates the use of CSS</p>

<h1>The break point</h1>
<p>Vincent van Gogh Green Wheat Fields, Auvers 1890 Painting</p>

<p>Lorem ipsum dolor sit amet</p>

<h1>Break point 2</h1>
<p>Claude Monet The Japanese Footbridge 1899 Painting</p>

<p>Lorem ipsum dolor sit a</p>
    
```
 CSS
```css 
h1 + p { 
    font-style: italic;
    background-color: aqua;
    font-size: 14px;
  }
```
 Output
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658661422720/t62vbXM3T.png align="left")
To read more about the Combinator refer to [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Column_combinator)

### Pseudo Selectors
There are two types of Pseudo selectors both provide a plethora of options for us to choose from to target the elements. 
#### Pseudo Classes
`:` is used to target the special state of a particular element `:hover` is one such state in which the style of a particular element changes on _hovering over it_. Here `hover` is a pseudo-class. A list of such pseudo-classes can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)

#### Pseudo Elements
`::` This is referred to as Pseudo elements and like the pseudo-classes, this also has a variety of options. An example would be `p::first-line`, this will target the _first line_ of the _paragraph_. To find out about the list of the Pseudo element refer [here](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)



I have tried to put light on most of the things related to selectors. For more refer to MDN docs. Thanks for reading and Keep Learning!