# Selectors in CSS

CSS Selectors are used to target the HTML elements to which we want to apply a set of CSS rules. In this blog, we will get to know about the most commonly used selectors.

### Universal (*) Selector:

```
*{
    margin: 0;
    padding: 0;
    outline: 0;
}

```
Browser's give some default values to margin and padding. To avoid browser defaults and reset the values to 0, developers use this approach.

### Class(.) Selector:

```
.badge {
      background-color: #009fe9;
      color: #ffffff;
}
```
Class selector is used to target all the elements which have been given a class name. The CSS rules written for a class will impact all the elements which the given class name

### ID(#) Selector:

```
#container {
      background: #1f1f1f;
}
```
ID selector is used to target a single element which have been given a unique ID name. The CSS rules will be applied only to that element.

### Chained Selector:

```
li.bg-black.text-white {
        background-color: #000000;
        color: #354c8d;;
      }
```
Chained selector can used when we want to apply rules to a element which has all the classes. All classes mentioned above must be there to apply changes.

### Combined Selector:

```
span, li {
        background-color: burlywood;
      }
```
Combined selector can be used to select two or more elements separed by commas.

### Descendant Selector:

```
div ul li {
        background-color: #0f7ac2;
      }
```
Descendant Selector can be used when we you need to go inside a element to select a child or a grandchild separated by spaces " ".

### Child(>) Selector:

```
div > li {
        background-color: rgb(3, 109, 128);
      }
```
Child Selector can be used to select the direct child of an element.

Thank you for reading!

#CSS #Selectors #LCO #IWriteCode  #iNeuron #FullStackJavaScriptWebDeveloperBootcamp