# All About CSS Selectors

# What is a CSS Selector?
- CSS selectors are used to find the element whose property will be set.
- These are used to target the HTML elements
- For Example
 ```
p { color : blue; }
```
- In this example, all the paragraph tags are selected and given the property of color to be blue.

# Universal Selector
- The CSS universal selector (*) matches elements of any type.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668272929367/oUe2QkS5H.png align="left")

# Individual Selector
- Individual Selectors are used to select a specific HTML tag on which we need to apply style. We can select any element with the help of an individual selectors. 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668272546091/oi29XpHjH.png align="left")

# Class Selector
- Class Selector selects all elements which match the class attribute. If the attribute is given as ```class = "firstClass"``` in any HTML element, then with the help of this syntax (given below) we can select all the HTML elements having the same class name and apply the CSS property.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668617724891/JfS6uTxUK.png align="left")

# ID Selector
-ID Selector selects an element as per the value of its id attribute. In an HTML document, there should not be multiple id attributes.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668618063647/8CmcsmXxI.png align="left")

# Chained Selector
- We can target multiple classes and a combination of class and id, and then apply CSS properties to them.
- There should **NOT** be any spaces in CSS between the class and ID.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668618632957/cxPzVFfY0.png align="left")

# Combinators
- It defines the relationship between the selectors in CSS.
- There are four different combinators in CSS:
 1. descendant selector (space)
 2. child selector (>)
 3. adjacent sibling selector (+)
 4. general sibling selector (~)

# Descendant Selector
- The descendant selector matches all elements that are descendants of a specified element.
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/ssk090/embed/oNyGzXW?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ssk090/pen/oNyGzXW">
  Untitled</a> by Shivananda Sai (<a href="https://codepen.io/ssk090">@ssk090</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

# Child Selector
- The child selector selects all elements that are the children of a specified element.
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/ssk090/embed/wvXrzOV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ssk090/pen/wvXrzOV">
  Untitled</a> by Shivananda Sai (<a href="https://codepen.io/ssk090">@ssk090</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

# Adjacent Sibling Selector
- The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/ssk090/embed/poKWEmy?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ssk090/pen/poKWEmy">
  Untitled</a> by Shivananda Sai (<a href="https://codepen.io/ssk090">@ssk090</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

# General Sibling Selector
- The general sibling selector selects all elements that are next siblings of a specified element.
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/ssk090/embed/WNyZGqv?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ssk090/pen/WNyZGqv">
  Untitled</a> by Shivananda Sai (<a href="https://codepen.io/ssk090">@ssk090</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

# What are Pseudo-Elements?
- A CSS pseudo-element is used to style specified parts of an element. It can be used to style the first letter, or line, of an element or Insert content before, or after, the content of an element.
- There are two special types of pseudo-elements, which are:
 1. ::after
 2. ::before
- They are special because they are used along with the content property. The content property helps to add content either after the selected element or before as per the pseudo-element used.

# ::after and ::before
- It is often used to add cosmetic content to an element with the content property. It is inline by default.
- **::after **adds content after the target element.
- **::before** adds content before the target element.
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/ssk090/embed/WNyZoJR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/ssk090/pen/WNyZoJR">
  Untitled</a> by Shivananda Sai (<a href="https://codepen.io/ssk090">@ssk090</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


# Note
- We can have multiple classes.
- We cannot have multiple IDs.

<hr>
Thanks for Reading