Hello there, So in this blog we will learn about CSS Selectors. As we all know that Selectors are used to give any kind of style to your text on your HTML page. So basically there are 4 types of selectors used in HTML to point the element.

• Universal Selector

• Element Type Selector

• ID Selector

• Class Selector

Now, we will learn in depth about all these selectors with their properties and their examples.

1.Universal Selector

In Universal Selector,It is used as a wildcard character. It selects all the elements on the pages.

* {  
   color: green;  
   font-size: 20px;  
}

Its HTML uses is:

<h2>Universal Selector</h2>  
<p>This style will be applied on every paragraph.</p>

2.Element Type Selector

In element Type selector, it must match at least one or more HTML elements of the same type. Thus, a selector of nav would match all HTML elements, and a selector of

would match all HTML unordered lists , or
elements, or

.

<ul>
  <li>Mango</li>
  <li>Banana</li>
  <li>Apple</li>
  <li>Papaya</li>
</ul>
<p>Example paragraph text.</p>

Its CSS should be:

ul {
   list-style: none;
   border: solid 1px #CCC;
}
p {
   color: pink;
   font-size: 18px;
}

3. ID Selector

ID Selector is declared either by using a hash or pound(#), followed by the id of the element. An id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single element. For Example:

#para1 {  
    text-align: center;  
    color: blue;  
}

HTML Uses here is:

<p id="para1">ID Selector</p>  
<p>This paragraph will not be affected.</p>

4. Class Selector

Class Selector is the most useful of all CSS Selectors. It is declared using a dot(.) followed by a class name. A class name never starts with a number. For Example:

.main{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

This Class selector CSS uses in HTML element such as:

<div class="main">Hello World!</div>

Apart from these important CSS Selectors following are also CSS Sellectors that are used:

5. Descendant Selector

It is also one of the most used CSS selectors. It’s declared with a dot/pound symbol (./#) preceding a string of one or more characters. Following are the example:

#main .row{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

This CSS uses in HTML element such as:

<div id="main">
<div class="row">Hello World!</div>
</div>

6. General Sibling combinator

This selector uses general sibling combinator matched element based on sibling relationships.It is declared by (~) symbol. for example:

h1 ~ div {
   margin-bottom: 20px; 
   color: red;
   font-size: 12px;
}

This CSS uses in HTML element such as:

<h1>Title</h1>
<p>Paragraph One </p>
<p>Paragraph two </p>
<p>Paragraph three </p>

7.Pseudo-Class

Pseudo class selector uses a colon to identify a pseudo state.This will work on a state of hover . For Example:

a:hover {
   color: red;
   font-size: 12px;
}

This pseudo-class selector CSS uses in HTML element such as: A pseudo-class of Abhinav Blog.

8.Pseudo-element

Peudo element selector uses a kind of pseudo element , :before pseudo-element.It inserts an imaginary element into the page before the content of the target element inside . For Example:

.a:before {
   content: "*";
   display: block;
   width: 100px;
   height: 100px;# 
   background-color: gray;
}

Its uses HTML as:

<h1>Title</h1>
<a href="index.html">A pseudo-element .</p>

That's all about CSS Selectors and hope you enjoyed.Feel free to reach out for any suggestions or learning.