Css can be Describes as how HTML elements should be look at the Screen. but Question arise how do we can select these Elements more efficiently.Because there are many types of Selector in the CSS which help us to make our work more easier like

Universal Selector
Individual Selector
Class and id Selector
Combined Selector
Inside element Selector
Direct child Selector
Sibling Selector

Universal Selector :-The Universal Selector are basicly used for giving the basic property to the whole HTML page its cover up the whole html page or blocks (react.js) . To use Universal Selctor we use (*). and it can be use as the following
```
*{
box-sizing: border-box;
font-family: poppins;
margin:0;
padding:0;
}
```

2. Individual Selector :- Individual or Simple Selector can give property to the individual tag/element by using tag name such as for

tag we can use p{property-name :property-provided}. (This example we effect all the p tag/elements, until the priority accure for the other like Class and Id )

p{
 text-align: center;
  color: red;
}

3. Class and Id Selector :- Class and Id Selector are the specific Element Selector in the CSS and html. These Selector are used for A Specific group or a Specific Individual. which fall under the Same Class or unique id and It's use case be like as follows.

for the Id selector :- Id selector are start with (#)

 #Specific_id_  {
         text-align : center;
         color: red;
                          }

for the Class Selector: :- Class selector are start with (.)

.Specific_Class_ {
         text align: center;
         color: blue;
                           }

Combined Selector :- Combined Selector are we Special Selector in terms of its use case. These Selector are not used for specific Elements, but These Selector are used for different Elements at once, without any child parent relation-ship and to use these Selector we use ( , ) to differentiate

HTML

 < body>
  < ul> 
          < li> hello I am inside the List </li>
 </ul>

< span > hello I am inside the Span </span>
</body>

**CSS**

li, span {
color : white;
background-color: black;
}

5.Inside an Element :- Inside an Element (IAE) is direct reference to a child Parent Relationship. for using IAE we have to under stand what is child parent Relation is in the CSS, for
Example 5.1 We Can say that an Element or tag which hold or contain the Another element can be consider as a Parent Element & the Element or Tag which is Parent Element Holding can be Considered as a Child Element ( I am just Clearing this by Example so people can under statand what is Child parent relation is css).

**
HTML**
 < body>
< div> ----------------------------------------------Parent

   < ul> ______________________________________________ Child
       |
       |-------------------------------------------Parent
          < li> hello I am inside the List </li> ______Chid
    </ul>

</div>
</body>



**CSS**

 div ul li {
   font-family: poppins;
color: blue;
}

6.Direct child Selector :- By Example 5.1 you can underStatand What is Child Parent relation is. Direct child Selection is another way of Inside an Element Selector but instead of using (_blackspace ) we use (>) as follow the HTML of exmple 5.1.

**CSS**

ul> li {
font-family: poppins;
color:blue:
}

7.Sibling Selector :- Sibling Selector are some of the complex one to understantand these Selector have two sign which they basicly use ( there can be more But i know two), first one is (+) and second one is (~) both are very differnt from each other the (+) is used for Selecting the after the sibling for only one and (~) is use to select all the other Sibling.

(confused same)

Source :- https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_tilde

**HTML** 

<!DOCTYPE html>
<html>
<head>
<style>
div ~  p {
  background-color: yellow;
}

//CHANGE FROM  MY SIDE

  a ~p {
           background-color: rgb(192, 255, 232);
}

</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

//CHANGE FROM MY SIDE
<a> hello this is an ancher tag </a>
<p>Paragraph 5.</p>
<p>Paragraph 6.</p>
<p>Paragraph 7.</p>

</body>
</html>

Selector in Css

Subscribe to my newsletter

Shivam Pandey

Shivam Pandey