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