What is a CSS selector? | Different Types of CSS Selectors?

What is CSS Selectors?

CSS Selectors are very important. The content is selected by CSS Selectors, for which we want to write CSS Rules. Selectors are a part of CSS Rule Syntax. Which can be an HTML Element, Element Attribute. You have already read about CSS Selectors in CSS Syntax Lesson. Now let’s know about its types

CSS Selectors are very important for a web page. Through CSS Selectors, we select the content for which we want to write CSS. CSS Selectors are used to “find” (or select) those HTML elements that we want to style.

For example, if you want to do CSS style in <h2> tag, then you can use selector to give color or size of <h2> etc.

The elements selected by the selectors are referred to as the subjects of the selectors.

Also Read: Which CSS property controls the text size?

In simple words, CSS Selectors are used to finding or selecting the HTML elements that you want to style.

CSS syntax has 3 parts-

selector { property: value }

• Selector: This is the element of HTML on which we have to apply style. You can see the example in the above picture, we have taken the body tag of html as the selector because we have to change the background color of the body.
• Property: We tell from the property which rule we want to apply on the selector. We have to make the background color of the body blue, so we have used background-color as a property in the example.
• Value: In this we tell what will be the value of the property, in the example we have taken the value blue of the background-color property.

We can divide CSS Selectors into five categories | Different Types of CSS Selectors

• Simple Selectors – Select Elements on the basis of ID, Name, and Class.
• Combinator selectors – select elements when there is a specific relationship between them.
• Pseudo-class selectors – select elements based on a certain position.
• Pseudo-elements selectors -select and style a part of an element.
• Attribute selectors – select elements based on an attribute or attribute value.

CSS Element Selector

The one who is our Element Selector selects HTML elements based on their name.

Here, all <h1> elements will be center-aligned, with a black text color

Also Read: How to add a background image in CSS?

<style>
 
h1{  
    text-align: center;  
    color: black;  
}

</style> 

CSS Id Selector

Id selector uses the id attribute of the HTML element to select a specific element. ID is always different in every web page means unique so id selector is used to select unique elements. To select any specific element, write the (#) character with it, followed by the name of the element’s id.

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

</style>

CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period character. (full stop) after the class name.

.left {  
    text-align: left;  
    color: blue;  
}  
</style>

CSS Universal Selector

The universal selector (*) selects all the HTML elements of a web page.

Also Read: Is CSS a programming language

<style>  
* {  
   color: mediumvioletred;  
   font-size: 20px;  
}   
</style>

CSS Grouping Selector

Grouping Selector is used to selecting all the elements with the same style definitions. We use the Grouping selector to reduce the code. Commas are used to separate each selector in a grouping.

<style>

h1, h2, p {  
    text-align: center;  
    color: green;  
}

</style>

All CSS Simple Selectors

Selector	Example	description
element.class	p.txt	Selects only <p class=”txt”> elements
.class	.left	Selects all elements with class=”left”
#id	#para1	Selects the element with id=”para1″
*	*	Selects all elements

FAQ-

What is the meaning of CSS Selectors?

CSS Selectors are used to finding or select the HTML elements that you want to style.

Also Read: What is CSS explain it? and CSS example? | Types of CSS?

Example of the CSS Selectors?

<style>
p{ } /* Element Selector */
#id{ } /* Id Selector */
.class{ } /* Class Selector */
</style>