Skip to content
Related Articles

Related Articles

Improve Article

Explain the different types of Selectors in CSS

  • Last Updated : 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :