CSS Secectors
We are here to learn about CSS selectors.
```
CSS
```
* {
color: red;
background-color: blue;
}
```
Output
![Untitled.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1658145881474/5rvTlTdDt.jpg align="left")
- ## Type selectors
It selects element by its name.
HTML
```
CSS Secectors
We are here to learn about CSS selectors.
```
CSS
```
h1 {
color: red;
}
p {
color: blue;
}
```
Output
![sec.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1658146034561/4rb0SZmSd.jpg align="left")
- ## Class selectors
It selects element by its class name.
To select elements using class name we need to use `.` before class name.
HTML
```
CSS Secectors
We are here to learn about CSS selectors.
```
CSS
```
.heading {
color: orange;
}
.description {
color: green;
}
```
Output
![third.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1658146413534/DXy9Lz4t_.jpg align="left")
- ## ID selectors
It selects element by its value of ID attribute.
To select elements using ID we need to use `#` before class name.
HTML
```
CSS Secectors
We are here to learn about CSS selectors.
```
CSS
```
#mainContainer {
background-color: orange;
padding: 5px;
}
```
Output
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658146939959/Co8msmFMZ.png align="left")
- ## Attribute selectors
The attribute selectors selects element based on the presence or value of a given attribute.
To select elements using attribute selectors we need to write element name followed by attribute or attribute and it's value inside `[]`.
HTML
```
CSS Selectors
We are here to learn about CSS selectors.
```
CSS
```
div[title] {
background-color: aquamarine;
padding: 5px;
}
h1[class="heading"] {
color: blue;
}
```
Output
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658147766982/NidIlX5SQ.png align="left")
***
# 2. Grouping selectors
- ## Selector List
The CSS selector list (`,`) selects all the matching nodes.
HTML
```
CSS Secectors
We are here to learn about CSS selectors.
```
CSS
```
h1, p {
color: red;
}
```
Output
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658252705050/E_GrKl8oQ.png align="left")
***
# 3. Combinators
- ## Descendant Selector
The descendent selector matches all elements that match the second selector that are contained within the first selector. It doesn't matter if it's an immediate child or a child's child. It is represented by single space between selectors.
HTML
```
CSS Secectors
We are here to learn about CSS selectors.
```
CSS
```
div p {
color: red;
}
```
Output
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658255144239/HGRAjgXXq.png align="left")
- ## Child Selectors
The child selectors pick all elements by the second selector that are direct children of elements matched by the first (>) separates the two CSS selectors.
HTML
```
CSS Secectors
We are here to learn about CSS selectors.
```
CSS
```
div > h1 {
color: green;
}
```
Output
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658255812207/9IHkFrj22.png align="left")
- ## General Sibling Selector
It chooses all elements that follow the initial element and are children of the same parent. We use `~` to separate the two elements.
HTML
```
CSS Selectors
We are here to learn about CSS selectors.
Second Para.
I am a span
Third Para.
```
CSS
```
h1 ~ p {
color: red;
}
```
Output
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658471729170/N0NEy6GI0.png align="left")
- ## Adjacent Sibling Selector
It selects the element which just after the first one.
We use `+` to separate the two elements.
HTML
```
CSS Selectors
We are here to learn about CSS selectors.
Second Para.
I am a span
Third Para.
```
CSS
```
h1 + p {
color: red;
}
```
Output
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658472180071/sxzHQtDIV.png align="left")
# 4. Pseudo selectors
- ## Pseudo classes
It selects the element based on state information of the element
We use `:` to separate the two elements.
HTML
```
CSS Selectors
We are here to learn about CSS selectors.
Second Para.
I am a span
Third Para.
Google
```
CSS
```
h1:hover {
color: red;
}
a:visited {
color: green;
}
```
Output
- On mouse over `h1` it's color becomes red.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658472810912/yr_nt6kGV.png align="left")
- Visited link will become green.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658473430226/aPor4RF2R.png align="left")
- ## Pseudo elements
It is used to select and style specific part of element.
We use `::` to separate the two elements.
HTML
```
CSS Selectors
We are here to learn about CSS selectors.
Second Para.
I am a span
Third Para.
Google
```
CSS
```
h1::before {
content: "Hi!! ";
color: orange;
}
h1::after {
content: ".";
color: red;
}
```
Output
- By using pseudo elements `::before` added "Hi!!" before `h1` and `::after` used for adding "." after `h1`.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658474403573/vP5uFhiRb.png align="left")
#### This is all from my side. Thanks for reading.