1. Home
  2. /
  3. CSS Tutorial
  4. /
  5. What is a CSS selector? | Different Types of CSS Selectors?

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.

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

Also Read: What Is CSS Explain It? And CSS Example? | Types Of CSS?

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

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.

Also Read: Which Is The Correct CSS Syntax?

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.

Also Read: How To Add CSS In HTML?

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

<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>

Also Read: Which CSS Property Controls The Text Size?

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.

<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>

Also Read: What Is Flex In CSS? | Uses Of The Flex In CSS?

All CSS Simple Selectors

SelectorExampledescription
element.classp.txtSelects only <p class=”txt”> elements
.class.leftSelects all elements with class=”left”
#id#para1Selects 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.

Example of the CSS Selectors?

<style>

p{ } /* Element Selector */

#id{ } /* Id Selector */

.class{ } /* Class Selector */

</style>

Leave a Reply

Your email address will not be published.