CSS Selectors are very important. CSS Selectors select the content for which we want to write CSS Rules.

CSS of selectors is a part of Rule Syntax. Which can be an HTML Element, Element Attribute. You have already read about CSS Selectors in CSS Syntax Lesson. Let us now know about its type.

Selectors are used according to the situation. For this, CSS provides different types of Selectors. Through which Web Masters get Flexibility. Below you are being told about the different types of selectors.

1.Element Selectors: –

This is a Particular HTML Element only. It is also called Type Selector. In this, you make CSS Rule Declare by making HTML Element a Selector. The word or syllable from which an HTML Element is represented. Selector is also written with the same word or syllable. See the example below.

p {
color:red;
}

2.Universal Selectors :-

When you want to apply the same style rule to all the elements available in an HTML document, then Universal Selectors are used. The Universal Selector is represented by * (Asterisk). See example below:

{
 color:pink;
 }

3.Class Selectors

A class is a Global Attribute. You can use it for CSS Selector. Elements on which you want to apply a Style Rule. All those elements are defined by the Class Attribute. And CSS Rule is written by putting Full Stop Symbol (.) Before this class name.

You can define a class for more than one element. Just you have to define a separate class with a name in each element. Keep in mind one thing, you cannot start a class name with a number. See example below.

.classname {
color:orange;
}

4.ID Selectors

Like Class, IDs are also a Global Attribute. It can also be made a CSS Selector. IDs are unique identities of an element. Which are defined separately for each element. The ID Selector is written with # (Hash). You cannot even start the name of an ID from a number. See example below.

idname {
color:orange;
 }

5.Attribute Selectors

By the way, Class and ID are also Attribute only. But, he has to name them. And in Attribute Selector we select Particular Attribute of an Element for Selector. This method is mostly used for Form Element.

input [type=”text”] {
background:orange;
}

The CSS rule given above will only apply to the type Attribute whose value will be text. Apart from this, it will not apply to any other type of Attribute.

6.Descendant Selectors or Sub-selectors

You can also apply CSS Rule to Define any other element within an Element. This work is done by Descendant Selector. It is also called Sub-selector. For this, first the Parent Selector is written, then the Define Child Element is given a space inside it. Then the CSS Rule is declared. See example below.

li b {
color:orange;
}

This Style Rule will only have an effect on the b Element within this li rule. Apart from this, it will not have any effect on other b Elements.

7.Child Selectors

You can also think of it as a sub-selector. But, it has another function. To apply CSS to a Child Selector, the first Parent Selector is written. After this, a sign of <Greater Than is given by giving space. Child selector is written after giving the space. And CSS Rule is declared.

body > p {
color:orange;
}

The effect of this Style Rule will be on the Paragraph Element which is the Child Element of the Direct Body Element. If a paragraph is inside any other element, then this style rule will not have any effect on that paragraph element.