CSS Selectors
Tags: html, css
Published: 2021-02-21 00:39:54

A lot of us use **_Classes / Id / Elements_** without knows there are other Selectors so, let's take an overview of CSS selector and how it helps us.

###What are CSS selectors?

CSS selectors let you apply CSS styles to a specific HTML element. They let you differentiate between HTML elements of the same type, like when we had two div elements but only wanted to style one of them.

###What Types of CSS Selector?
There is a lot of selectors provided from CSS to give you an enormous level of flexibility  So let's dive into it.

##Basic selectors



**Universal selector**
universal selector gives you control of all elements like if you want to apply red color to all your elements, Many developers will use this trick to zero out the margins and padding.
![Universal Selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbv8vnzy4y8hjuubk9lg.png)



**ID selector**
id selector is Prefixing the hash symbol and it gives us the ability to select a specific element with id.
![ID selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktvzmscpc1ih0zc1erls.png)
  >_There should be only one element with a given ID in a document_

**Class selector**
The class selector is prefixing with a dot and it gives us the ability to select all elements with this class name and this is the most common selector because it gives us the flexibility to create reusable classes to use over the project
![Class selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w7i6079v80vuwy53ivb.png)

**Element selector**
What if you want to target all elements on a page, according to their type it's simple you can just type the element type.
![Element selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jraiohvv8bsy9b0pey8b.png)

**Attribute selector**
in my opinion, this selector really helpful because it gives you the flexibility to select specific elements from their attribute
like if we have 2 inputs one of them is text and the second is password input we can select the text only by this selector.
![Attribute selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5j39rkfwv51ut22abrl.png)
We can select a specific element depended on the start letter or end letter or contain a string and here list of these selectors.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6ym6z5y8ztquejw0vc6.png)

##Combinator selectors
A combinator is something that explains the relationship between the selectors.

**Descendant combinator** 

this selector is one of the most common selectors too and it's helpful when we want to select all (children) in our case is p inside a specific container in our case is div (parent). 

![Descendant combinator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw4w8rr2l2ygjj7ol6y7.png)
```
a b{
 // code
}
```
> _If your selector looks like **a b c d**, you're doing it wrong. Always ask yourself if it's absolutely necessary to apply all of that weight_



**Adjacent sibling combinator** 
this selector will select only the first element that is immediately preceded by the former element in our case here the p is the selected element
![Adjacent sibling combinator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yoapd79tpg5amyvpkeu.png)

**General sibling combinator** 
This General sibling combinator is similar to Adjacent sibling combinator, but it's less strict. because it'll select all p after h1 even it's not the first element.
![General sibling combinator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nquqyrvpvvpbpfadn7v4.png)

 **Child combinator** 
this Selector only looks for the first level inside the container and applies the style on it so if we have a span inside span inside the div the style will apply on the first span only because it's the first level.
![Child combinator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9npqdazygo5zfn01ye88.png)
##Pseudo Selectors
pseudo allows the selection of elements based on state information like if it's hovered or visited or checked etc... and we use : symbol to refer to it and here a list of the Pseudo Selectors.
![Pseudo Selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o62yezeq9vre5h44l4z.png)
##Conclusion
I hope that I explained the summary of CSS selectors and  If You have any queries or any mistakes that you think I have made would be more than happy If you could give suggestions to further improve it And if you have any question pm me.
##Resources
https://www.w3schools.com/cssref/css_selectors.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
https://www.w3schools.com/css/css_selectors.asp