The first and most important part of the CSS is CSS Selectors without knowing them well we will be facing lots of difficulties in the future so let’s learn them thoroughly.

How many types of CSS selectors are there?

• Universal Selector
• Individual Selector
• Class Selector
• Id Selector
• And Selector (Chained)
• Combine Selector
• Inside an element
• Direct Child
• Sibling ~ OR +
• Psuedo Selectors

Universal Selector

Universal selector denoted by { * } applies a style to the entire web page. If we want to apply background color to the whole web page or you want to apply the same font to all pages the universal selector comes into the picture.

General Syntax

selector {  property : value;  }

* {  background-color: #355764;  }

In the above file, we gave a background color to the entire web page, and also the entire text color changed. The main use case of the universal selector is to change the default margin and padding given by the browser.

Individual Selector

As its name, it is an individual selector with directly picks the tag name and applies the style to it. For more clearance se the below example.

General Syntax

selector {  property : value;  }

h1 {  background-color: #355764;  }

Class (.) selector

General Syntax

selector {  property : value;  }

.class name {  background-color: #355764;  }

The class selector denoted by { . } targets the element that the classes are given. We can give multiple classes with the same name to different HTML elements.

In the above example, we gave the same class name to the different HTML elements and saw amazing results.

Id(#) Selector

In the Id (#) selector, there is only one id to one HTML element and the id should be unique within the same file.

General Syntax

selector {  property : value;  }

#Id name {  background-color: #355764;  }

And Selector (Chained)

What if you have more than one class in the Html element or What if you have class and id both in the same HTML element? then you have style using and selector. It is like AND condition in mathematics. when the condition is met style will be applied.
Note:- In between both selectors, there should be no space.

General Syntax

selectorSelector{  property : value;  }

.class name.class name{  background-color: #355764;  }

#Id name.class name{  background-color: #355764;  }

Combine selector

When You use multiple selectors to target multiple HTML elements that are multiple selectors. Note:- Multiple selectors separated by comma

General Syntax

selector, Selector, Selector{  property : value;  }

.class name, .class name{  background-color: #355764;  }

#Id name, .class name, .class name{  background-color: #355764;  }

Inside an element selector

What if you have an HTML file and it has

<Header>
the tag inside the header you have 
<ul>
tag and inside
<ul>
tag you have
<li>
and lastly have 
<a>
tag inside the 
<li>
tag?

Dont worry we have Inside an element selector.

General Syntax

selector Selector Selector{  property : value;  }

tag-name tag-name{  background-color: #355764;  }

#Id-name .class-name .class name{  background-color: #355764;  }

Direct Child

In simple words, we have the Parent and their Direct Child and the style will be applied to the child.

General Syntax

selector1 > selector2{  property : value;  }

tag-name >tag-name{  background-color: #355764;  }

#Id-name >.class name{  background-color: #355764;  }

In the above example style is applied on the li which is the direct child of OL and UL respectively.

Sibling ~ OR +

Sibling +
selects the next direct after the sibling element.

General Syntax

selector1 + selector2{  property : value;  }

tag-name + tag-name{  background-color: #355764;  }

Sibling ~

       selects all elements that are the next sibling element.

General Syntax

selector1 ~ selector2{  property : value;  }

tag-name ~ tag-name{  background-color: #355764;  }

Psuedo Element ::before and ::after

::before create a pseudo-element before that is the first child of the selected element applies styles with the content property. This is the inline property by default.

General Syntax

selector::before{  property : value;  }

tag-name::before{ 
content:" ";
          border: 1px solid #000;
          padding: 10px;
          border-radius:20px;
          background-color:#ff3d00; 
 }

::after create a pseudo-element after that child of the selected element applies styles with the content property. This is the inline property by default.

General Syntax

selector::after{  property : value;  }

tag-name::after{ 
content:" ";
          border: 1px solid #000;
          padding: 10px;
          border-radius:20px;
          background-color:#ff3d00; 
 }

Note:- Without Content property pseudo-element cannot be created.

:Hover

:Hover used to give after Effect to the HTML element. When the cursor pointer is pointed at the element the effect applies to the element.

General Syntax

selector:hover{  property : value;  }

To Be Continued......