Explain the different types of Selectors in CSS - GeeksforGeeks

26 Sep, 2021
A CSS selector selects the HTML element(s) for styling purpose. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are many basic different types of selectors.
Element Selector
Id Selector
Class Selector
Universal Selector
Group Selector
HTML code: Consider the sample code to understand selectors and their uses in a better way.
HTML
<!DOCTYPE html><html lang="en">  <head>    <link rel="stylesheet" href="style.css"></head>  <body>    <h1>        Sample Heading    </h1>      <p>        Geeks for Geeks is a computer science         portal for geeks and computer enthusiasts.        Geeks for geeks provide a variety of         services for you to learn, thrive and        also, have fun! Free Tutorials, Millions         of Articles, Live, Online and Classroom         Courses, Frequent Coding Competitions,        Webinars by Industry Experts, Internship         opportunities and Job Opportunities.    </p>      <div id="div-container">        Geeks for geeks is a computer science         portal for geeks and computer enthusiast.        Geeks for geeks provide a variety of         services for you to learn, thrive and        also, have fun! Free Tutorials, Millions         of Articles, Live, Online and Classroom         Courses, Frequent Coding Competitions,        Webinars by Industry Experts, Internship         opportunities and Job Opportunities.    </div>      <p class="paragraph-class">        Geeks for geeks is a computer science         portal for geeks and computer enthusiast.        Geeks for geeks provide a variety of         services for you to learn, thrive and        also, have fun! Free Tutorials, Millions         of Articles, Live, Online and Classroom         Courses, Frequent Coding Competitions,        Webinars by Industry Experts, Internship         opportunities and Job Opportunities.    </p></body>  </html>
We will apply CSS rules to the above HTML code.
1. Element selector: The element selector selects HTML elements based on the element name (or tag) for example p, h1, div, span, etc.
style.css: The following code is used in the above HTML code. You can see the CSS rules applied to all <p> tags and <h1> tags.
h1 {
    color: red;
    font-size: 3rem;
}

p {
    color: white;
    background-color: gray;
}
Output:
2. Id selector: The id selector uses the id attribute of an HTML element to select a specific element.
Note: An id of element is unique on a page to use id selector.
style.css: The following code is used in the above HTML code using id selector.
#div-container{
    color: blue;
    background-color: gray;
}
 
Output:
The CSS rule below will be applied to the HTML element with id=”div-container”:
3. class-selector: The class selector selects HTML elements with a specific class attribute.
style.css: The following code is used in the above HTML code using the class selector. To use class selector you must use ( . ) followed by class name in CSS. This rule will be applied to the HTML element with the class attribute “paragraph-class“
.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}
Output:
4. universal-selector: The * selector in CSS is used to select all the elements in a HTML document. It also selects all elements which are inside under another element.
style.css: The following code is used in the above HTML code using the universal selector. This CSS rule will applied to each and every HTML element on the page: 
* {
  color: white;
  background-color: black;
}
Output:
5. Group-selector: This selector is used to style all comma separated elements with the same style.
style.css: The following code is used in the above HTML code using the group selector. Suppose you want to apply common styles to different selectors, instead of writing rules separately you can write them in groups as shown below.
#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Questions
CSS-Selectors
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?