Hello friends welcome to solution host.

Today I am going to show you different types of css selectors.

So read the complete article carefully because css selectors is used to designing websites and blogger theme development.

What is css selectors

So let's start this article and see what is css selectors.

CSS selectors

There is multiple types of css selectors. But before learning of the types of css selectors, we need to know that what is css selectors.

What is CSS Selectors

Css selectors is the way of selecting html elements and style them.

That means by using css selectors we can select any html elements and we can apply style on the specific html element.

Types of css selectors

Following is the most common used css selectors

  • Universal selctor
  • Tag selector
  • ID selector
  • Class selector
  • nth child selector
  • Pseudo selectors

Let's see the explanation of above css selectors with example.

CSS Universal selector

The universal selector is the css selector that selects all elements of html.

Universal selector is denoted by star (*).

When we write the css property and value in the using universal selector then its style will be applied on all html elements.

Let's take an example of css universal selector

*{
margin:0;
padding:0;
}

The style will be applied in all html elements and all elements margin , padding will be zero.

CSS Tag Selectors

The css tag selector is the selectors that selects html tags.

The css tag selector selects tag by tag name.

You can see the example of css tag selector -

div{
background-color:black;
color:white;
}

Above is the example of css tag selector. And in the example you can see div tag is selected. That means all div tags background will be black and color will be white.

CSS ID selector

The Id selector is the css selector that select html element by the value of id attribute.

That means we add id attribute with its value in the specific element then we select tag from I'd name.

Id selectors is denoted by hash (#) symbol.

Example of css id selector -

<style>
#section{
color: red;
}
</style>
<div id="section">
Hello I am Website Developers
</div>


In above example of css I'd selector, we can see that an div element is available and in div tag we added id attribute which value is section.

So we select div element by its I'd with # symbol.

In example div elements is selected and it's color is defined as red.


CSS Class Selector

The class selector is same as I'd selector.

But the main difference is that, css class selector is denoted by . (Dot). Whereas I'd selector is denoted by # symbol.

Css class selector is select the element based on class name.

Class name is defined in the class attribute.

One class can be assigned in multiple tags or elements.

But I'd should be single. It can not be assigned to another. It's a recommended rule.

Example of css class selector - 

<style>
.section{
color:blue;
}
</style>
<div class="section">
Hi This is class element.
</div>


In above example you can see, the div has a class which name is section. And it is selected by css selector.

The color of div element (which class name section) is red.