# CSS Basic part-2

# What are Pseudo-classes?

- A pseudo-class is used to define a special state of an element.
- **For example, it can be used to:**

- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus

## `:hover` pseudo-class
- When you hover over the link in the example, it will change color 

```
div:hover {
  color: blue;
}

```
## `:link`pseudo-class
- When link is unvisited then the link pseudo get's work or show some css.

```
a:link {
  color: red;
}
``` 

## `:visited` pseudo-class
- When link is visited then the link show some change.

```
a:visited {
  color: pink;

}
``` 
  ## `:active` pseudo-class

- When link is selected that the time `:active` pseudo-class done her work and show some changes.

```
a:active {
  color: yellow;
}
``` 
## `:focus` pseudo-class

- Select and style an input field when it gets focus.
```
input:focus {
  background-color: yellow;
}
``` 


# CSS in-child Pseudo-class

- The child pseudo-class matches a specified element that is the first child of another element.

- **These child pseudo-class are as follow:-**
## :first-child Selector

- The :first-child selector is used to select the specified selector.
- It is selected only if it is the first child of its parent.

```
p:first-child {
  background-color: yellow;
}
```

```
ul > :first-child {
  background: yellow;
}
``` 
## `:last-child` Selector
- The :last-child selector matches every element that is the last child of its parent.
- Specify a background color for the <p> element that is the last child of its parent:
```
p:last-child {
  background: #ff0000;
}
```
## `:nth-child()` selector:
- The :nth-child(n) selector matches every element that is the nth child of its parent.
- n can be a number, a keyword (odd or even), or a formula (like an + b).
```
:nth-child(number) {
  css declarations;
}
``` 
### `:nth-child(odd)`

- Done css on odd number elements.

```
p:nth-child(odd) {
  background: red;
}
``` 
### `:nth-child(even)`

- Done css on even number elements.

```
p:nth-child(even) {
  background: lightgreen;
}
``` 
## `nth-child(3n+0)`

- background color for all p elements whose index is a multiple of 3.
```
p:nth-child(3n+0) {
  background: red;
}
``` 
## `nth-child(3n-1)` 
-  a background color for all p elements whose index is a multiple of 3. Then we subtract 1 and will select the second, fifth, eight, etc.

```
p:nth-child(3n-1) {
  background: red;
}
``` 
## `:first-of-type`
- Specify a background color for the first <p> element of its parent.

```
p :first-of-type {
  background: #ff0000;
}

```
 
## `:last-of-type`

- Specify a background color for the last <p> element of its parent.

```
p :last-of-type {
  background: #ff0000;
}

``` 
## `:nth-of-type()`

- The `:nth-of-type(n)` selector matches every element that is the nth child, of the same type (tag name), of its parent.

```
div:nth-of-type(2) {
  background: red;
}
``` 


#  Pseudo-Elements?
- it can be used to Style the first letter, or line, of an element.
- Insert content before, or after, the content of an element.

```
selector::pseudo-element {
  property: value;
}
``` 
## `::first-line`

- The `::first-line` pseudo-element is used to add a special style to the first line of a text.

```
p::first-line {
  color: pink
}
``` 
## `::first-letter`

- The `::first-line` pseudo-element is used to add a special style to the first letter of a text.
```
p::first-letter {
  color: pink
}
``` 
##  `::before`

- The` ::before` pseudo-element can be used to insert some content before the content of an element.

```
h1::before {
  content: "Good Morning";
}
``` 
## `::after`

- The` ::after` pseudo-element can be used to insert some content before the content of an element.

```
h1::after {
  content: "Good Morning";
}
``` 

![d5489851eec51d62de119bb3c3f48c5d.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1669216784453/4uq_Z-a5i.gif align="left")