Types of CSS Selectors

The selectors point to the HTML element you want to set the style. The selector is the technic to give any kind of style to your text in your HTML page. There are 4 types of CSS Selectors used in HTML to point the element.

1.Universal Selector
2.Element Type Selector
3.ID Selector
4.Class Selector

Let’s look at all the different kinds of selectors available, with a brief description of each type of CSS Selectors here.

Universal Selector

The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Look at the following CSS example, which uses the universal selector.

* {
   color: white;
   font-size: 12px;
}

Element Type Selector

This selector 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 <ul> elements, or <p>. Look at the following CSS example.

ul {
   list-style: none;
   border: solid 1px #CCC;
}

p {
   color: gray;
   font-size: 16px;
}

This element selector CSS uses an HTML element such as

<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Foure</li>
</ul>

<p>Example paragraph text.</p>

ID Selector

This selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer.

This selector matches any HTML element that has an ID attribute with the same value as that of the selector. Look at the following CSS example, which uses the ID selector.

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

This ID selector CSS uses an HTML element such as:

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

Class Selector

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer.

Look at the following CSS example, which uses the Class selector:

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

This Class selector CSS uses an HTML element such as:

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

Conclusion

In conclusion, I want to say that these types of CSS Selectors are mostly and regularly used by every website designer as well as a developer. So, you should use all of these where you want in your design of the website. You can see more CSS Selectors from here.