# Psuedo Classes & Pseudo Elements in CSS

Hey everyone, this article covers about Pseudo Classes & Pseudo Elements in CSS.

#### What you will learn in this article

> Pseudo Classes use case with example

> Pseudo Elements use case with example

#### So Lets understand the terms 
**Pseudo Classes:-**  lets you style a specific state of an element with a selector. 
Pseudo classes only applied to interact with the element in some way.

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

> Syntax
```
selector:pseudo-classe {
  property: value;
}
```

**Pseudo Elements:-** lets you style a specific element in the DOM

For example, it can be used to:
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element

> Syntax
```
selector::pseudo-element {
  property: value;
}
```

#### Representation: -
`Please note that, One colon (:) for Classes. two Colons (::) for Elements`
*The double colon (::) was introduced in CSS3 to differentiate pseudo-elements such as ::before and ::after from pseudo-classes such as :hover and :active.* 


`Quite Confused?`
OK, lets understand them one by one.

### Pseudo Classes - Example
1. link
2. visited
3. hover
4. active

Go Code Now

  HTML
  ```
  <a href="https://www.google.com/webhp?    hl=en&ictx=2&sa=X&ved=0ahUKEwipoPTShoX5AhUTyHMBHScOA1gQPQgJ">Google   Doodle</a>
  ```

  CSS
  ```
  a:link{
    font-color: red;
  }

  <!-- when we visited once on a link, then the color of the link will be changed to 'green' -->
  a:visited{
    font-color: green;
  }

  <!-- when we hover on a link, then the color of the link will be changed to 'orange' -->
  a:hover{
    font-color: orange;
  }

  <!-- when we keep clicking on the button, the color will turn 'purple' at that time. -->
  a:active{
    font-color: purple
  }

  ```
-----------------------------------------------------------------------------------------

### Pseudo Elements: - Examples


1. `::first-letter` - pseudo-element will let you style the first letter of text
```
h3 + p::first-letter{
  font-style: normal;
  margin-right: 5px;
}
```
> Here, h3 + p -> Paragraph child element immediate to h3 parent

2. `::first-line` - pseudo-element will let you style the first line of text

  ```
  p::first-line {
    color: goldenrod;
    font-weight: bold;
  }
  ```

3. `::before and ::after` - pseudo-elements create a child element inside an element only if you define a content property.

  ```
  div::before {
    content: "before";
  }
  div::after {
    content: "after";
  }
  ```

  HTML - how it looks like
  ```
  <div>
     before
    <!-- Rest of stuff inside the div -->
    after
  </div>
  ```
  > The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page     without it needing to be in the HTML.

4. `::selection` - pseudo-element allows you to style how selected text looks.

  ```
  ::selection {
    background: green;
    color: white;
  }
  ```

Not enough? 
Refer these articles
- https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/

- https://careerkarma.com/blog/css-before-and-after/