Open In App

CSS Selectors

Improve
Improve
Like Article
Like
Save
Share
Report

CSS Selectors targets the HTML elements on the Pages to add styles. CSS selectors select HTML elements according to their id, class, type, attribute, etc. Selectors play a crucial role in defining the appearance and layout of web pages, enhancing both aesthetics and user experience.

CSS Selectors Types

CSS Selectors Description

Simple Selectors

It is used to select the HTML elements based on their element name, id, attributes, etc

Universal Selector Selects all elements on the page.
Attribute Selector Targets elements based on their attribute values.
Pseudo-Class Selector Selects elements based on their state or position, such as :hover for hover effects.
Combinator Selectors Combine selectors to specify relationships between elements, such as descendants ( ) or child (>).
Pseudo-Element Selector Selects specific parts of an element, such as ::before or ::after.

Simple Selectors

Simple selectors contains the below classes.

Simple Selector Description
Element Selector Selects HTML elements based on their tag names.
Id Selector Targets an HTML element with a specific id attribute.
Class Selector Selects elements with a particular class attribute.

Example:In this example, we will write the code to understand selectors and their uses in a better way.

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <title>CSS Selectors</title>
        <link rel="stylesheet" href="style.css" />
    </head>
  
    <body>
        <h1>Sample Heading</h1>
        <p>This is Content inside first paragraph</p>
        <div id="div-container">
            This is a div with id div-container
        </div>
        <p class="paragraph-class">
            This is a paragraph with class paragraph-class
        </p>
    </body>
</html>


Note: We will apply CSS rules to the above Example.

Element Selector

The element selector selects HTML elements based on the element name (or tag) for example p, h1, div, span, etc.

NOTE : The following code is used in the above Example. You can see the CSS rules applied to all <p> tags and <h1> tags.

CSS:

h1 {
    color: red;
    font-size: 3rem;
}
p {
    color: white;
    background-color: gray;
}

Output:

CSS-Element-Selectors-Example-output

CSS Element Selector output

Id Selector

The id selector uses the id attribute of an HTML element to select a specific element. An id of the element is unique on a page to use the id selector.

Note: The following code is used in the above Example using the id selector.

CSS:

#div-container{
    color: blue;
    background-color: gray;
}

Output:

CSS-Id-selectors-example-output

CSS ID Selectors example output

Class Selector

The class selector selects HTML elements with a specific class attribute.

Note: The following code is used in the above Example using the class selector. To use a 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

CSS:

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

Output:

CSS-Class-Selectors-Example-Output

CSS Class Selector Example Output

Universal Selector

The Universal selector (*) in CSS is used to select all the elements in an HTML document. It also includes other elements which are inside under another element.

Note: The following code is used in the above Example using the universal selector. This CSS rule will be applied to each and every HTML element on the page: 

CSS:

* {
    color: white;
    background-color: black;
}

Output:

CSS-Universal-Selector-Example-Output

CSS Universal Selector Example Output

Group Selector

The Group selector is used to style all comma-separated elements with the same style.

Note: Suppose you want to apply common styles to different selectors, instead of writing rules separately you can write them in groups as shown below.

CSS:

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

Output:

CSS-Group-Selector-Example-Output

CSS Group Selector Example Output

Attribute Selector

The attribute selector [attribute] is used to select the elements with a specified attribute or attribute value.

Note: The following code is used in the above Example using the attribute selector. This CSS rule will be applied to each and every HTML element on the page:

CSS:

[href] {
    background-color: lightgreen;
    color: black;
    font-family: monospace;
    font-size: 1rem;
}

Output:

CSS-Attribute-Selectros-Example-Output

CSS Attribute Selectros Example Output

Pseudo-Class Selector

It is used to style a special type of state of any element. For example- It is used to style an element when a mouse cursor hovers over it.

Note: We use a single colon(:) in the case of a Pseudo-Class Selector.

Syntax:

Selector:Pseudo-Class {
     Property: Value;
}

CSS:

h1:hover{
    background-color: aqua;
}

Output:

CSS-Pseudo-Selector-Example-Output

CSS Pseudo Selector Example Output

Pseudo-Element Selector

It is used to style any specific part of the element. For Example- It is used to style the first letter or the first line of any element.

Note: We use a double colon(::) in the case of a Pseudo-Element Selector.

Syntax:

Selector:Pseudo-Element{
     Property:Value; 
}

CSS:

p::first-line{
    background-color: goldenrod;
}

Output:

CSS-Pseudo-Element-Selector-Example-Output

CSS Pseudo-Element Selector Example Output



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads