# CSS Selectors 101: Targeting Elements with Precision
## **Why CSS selectors are needed**
CSS selectors are the foundation of styling. CSS selectors are a way of selecting HTML elements that we want to style.
## **1\. Element selector**
Element selector selects all HTML elements of the same type.
**“paint all the houses”**
**css**
**Copy**
```plaintext
p {
color: black;
}
```
* every `` becomes black
## **2\. Class selector**
It is a way of selecting all elements with a specific class and styling them.
**“paint all the houses whose doors are blue”**
**css**
**Copy**
```plaintext
.bg-aquamarine {
background-color: aquamarine;
}
```
**html**
**Copy**
```plaintext
Box 1
```
* both elements will get an aquamarine background
## **3\. ID selector**
It is a way of selecting an element with a specific ID. An ID can be assigned to only one element.
**“paint this house”**
**css**
**Copy**
```plaintext
#paragraph {
color: red;
}
```
**html**
**Copy**
```plaintext
Important text
```
* only this paragraph color will become red
## **4\. Group selectors**
It is a way of selecting different HTML elements and applying the same style.
**“paint all houses whose doors are blue and whose doors are red”**
**css**
**Copy**
```plaintext
h1, h2, h3 {
font-family: sans-serif;
}
```
## **5\. Descendant selectors**
It lets you apply style to an element that is inside another element.
**“paint the door inside that house”**
**css**
**Copy**
```plaintext
h1 p {
color: chartreuse;
}
```
**html**
**Copy**
```plaintext
This text will be chartreuse
This text will NOT change
```
* only the paragraph inside `h1` will be colored chartreuse
## **6\. Universal selector (\*)**
This selects all the elements in HTML.
**css**
**Copy**
```plaintext
* {
color: aqua;
}
```
**html**
**Copy**
```plaintext
This is a div
This is a paragraph
This is a header
```
* all text will be aqua
## **7\. General sibling selector (~)**
It is used to select all the siblings of an element.
**html**
**Copy**
```plaintext
Main Title
Paragraph 1 (This will be styled)
Some other element
Paragraph 2 (This will be styled)
Paragraph 3 (This will be styled)
Again a h1
Paragraph 1 (This will be styled because it is a sibling of h1)
```
**css**
**Copy**
```plaintext
h1 ~ p {
color: blue;
font-weight: bold;
}
```
## **8\. Adjacent sibling selector (+)**
This selects the element that is just after a specific element.
**css**
**Copy**
```plaintext
h2 + p {
color: red;
}
```
**html**
**Copy**
```plaintext
This p color will be red because it is just after the h2
This p color will not be red
```
## **9\. Pseudo selector**
It allows you to select an element when it is in a specific condition, like styling an input when the user hovers over it.
**css**
**Copy**
```plaintext
input:hover {
color: blue;
}
```
### **›There are two types of pseudo selectors -**
1. **Pseudo-class selector**
This is used to select a specific state of an existing element. They are denoted by `:` (single colon).
Top 5 pseudo-class selectors:
a. **:hover**
**css**
**Copy**
```plaintext
input {
color: yellow;
}
input:hover {
color: blue;
}
```
b. **:focus**
**css**
**Copy**
```plaintext
input:focus {
color: aquamarine;
}
```
c. **:link**
**css**
**Copy**
```plaintext
a:link {
color: pink;
}
```
d. **:visited**
**css**
**Copy**
```plaintext
a:visited {
color: yellow;
}
```
e. **:checked**
**css**
**Copy**
```plaintext
input[type="checkbox"]:checked {
accent-color: red;
}
```
2.**Pseudo-element selector**
These are used to design a specific part of an element. They are denoted by `::` (double colon).
a. **::first-line**
**css**
**Copy**
```plaintext
p::first-line {
color: red;
}
```
b. **::first-letter**
**css**
**Copy**
```plaintext
p::first-letter {
color: red;
}
```
c. **::placeholder**
**css**
**Copy**
```plaintext
input::placeholder {
color: red;
}
```
## **Basic selector priority (very high level)**
From lowest to highest -
* Element selector
* Class selector
* ID selector
**css**
**Copy**
```plaintext
p {
color: blue;
}
.text {
color: green;
}
#main {
color: red;
}
```
**html**
**Copy**
```plaintext
Hello
```
* the paragraph color will be red
### **›What if selectors are the same and written multiple times?**
The CSS property written last will be applied.
**css**
**Copy**
```plaintext
.bg {
background-color: black;
}
.bg {
background-color: white;
}
```
**html**
**Copy**
```plaintext
```
* background color of the div will be white