CSS Selectors

Updated on 04/02/2025464 Views

Table of Content

A CSS selector is the first part of the CSS rule. This tool does not select specific elements or a group of elements for applying the CSS property; rather, it is a versatile tool that empowers you to control the style of the webpage. The CSS selectors select aspects known as the "Subject of the selector". CSS selectors in HTML target the HTML elements that need styling. The CSS selector specification defines selectors separately. Like other CSS properties, they need to be browser-friendly.

Overview

A selector is not just a tool but the backbone that empowers you to style the webpage precisely as you envision. In the regular webpage application you develop, understanding and implementing CSS selectors can significantly enhance your page's look and aesthetic experience, giving you the power to create visually appealing designs.

Advantages of Using CSS Selector

It is more faster than XPath. Consistency is lacking because XPath doesn't support implementation jointly with all browsers. However, we can maintain consistency in the CSS selector.
In CSS selectors, we can find our elements easily.
CSS selectors are way easier to learn and implement.
This delivers high performance when compared to XPath.
If you see the syntax of CSS selectors, it is more user-friendly and readable.

CSS Selector List

When you need to define the same rules for different elements, you can streamline your code by combining them into a single list. This is a CSS selector list, a powerful tool for efficient styling.

For example, in the CSS style below, the rules for p1 and h1 are the same. Hence, combine them into one single list.

Example:

p1 {
color: pink;
}
h1 {
color: pink; }

After combining the selector list, the above example can be implemented as below:

p1, h1 {
color: pink;
}

Types of CSS Selectors

Let's dive into the world of CSS selectors. There are various types, each with its unique functionality and use cases. In this article, we'll explore the major ones, equipping you with the knowledge to style your web pages precisely.

Type Selectors
Class Selectors
ID Selectors
Attribute Selectors

CSS Type Selector

A CSS Type selector is also called a CSS Name selector or CSS Element selector because it selects a particular name/element from the CSS.

It selects a particular tag/element.
It is not case-sensitive.
It selects the element by name.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Example</p>
<p>This is to learn CSS selectors</p>
<h1> Welcome to Selectors </h1>
</body>
</html>

In the example above, highlight will apply the CSS selector, which is a type selector.

Output of above code:

CSS ID Selector

A CSS ID selector selects the element using the ID name defined for the type. Each type can have a different ID.

It selects a particular ID attribute of a particular element.
Each page has a unique ID element.
Each selector will select only one unique element.
To select the ID selector always use hash(#) before the ID attribute name.

CSS ID selector syntax:

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Example</p>
<p>This is to learn CSS selectors</p>
<h1> Welcome to Selectors </h1>
</body>
</html>

In the example above, the CSS selector, an ID selector, will be applied only to the ID named para1. Hence, the selector is not used in another paragraph. See the output of the first section below to learn the difference.

Output of above code:

CSS Class Selector

A CSS class selector selects the element using the specific class attribute.

It selects a particular class attribute.
To select the class selector, always use the period character (.) followed by the class name.
Class names should not start with any number.
Case-sensitive class selectors start with a dot(.) character.

CSS class selector example:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Example</p>
<p>This is to learn CSS selectors</p>
<h1 class="center"> Welcome to Selectors </h1>
</body>
</html>

In the example above, the CSS selector, a class selector, will be applied only to the class attribute.

Output of above code:

CSS Class Selector for a Particular Element

In the same example above, let's make some changes in the code to select only particular class elements and see how the output changes.

<!DOCTYPE html>
<html>
<head>
<style>
h1.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Example</p>
<p class=”center”>This is to learn CSS selectors</p>
<h1 class="center"> Welcome to Selectors </h1>
</body>
</html>

Output of above code:

CSS Universal Selector

A CSS universal selector selects the whole elements in the document

It is indicated by the asterisk symbol (*).
It is used as a wildcard character.

CSS universal selector example:

<!DOCTYPE html>
<html>
<head>
<style>
* {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p id="para1">Hello Example</p>
<p class=”center”>This is to learn CSS selectors</p>
<h1 class="center"> Welcome to Selectors </h1>
</body>
</html>

In the example above, all HTML elements have the universal CSS selector applied to them.

Output of above code:

CSS Group Selector

A CSS Group Selector selects the same style of elements and groups them.

A comma separates it.
It reduces the code lines.

CSS group selector example:

<!DOCTYPE html>
<html>
<head>
<style>
p,h1 {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p id="para1">Hello Example</p>
<p class=”center”>This is to learn CSS selectors</p>
<h1 class="center"> Welcome to Selectors </h1>
</body>
</html>

In the example above, the CSS selector groups p and h1 applies the same style.

Output of above code:

Combinator Selector

The CSS combinator combines (or) explains the relationship between two selectors. If we want to combine any two selectors, we can use this CSS Combinator. There are four types of CSS combinators available.

General Sibling Selector (~): It selects the element that follows the first selector.
Adjacent Sibling Selector (+): This selects the element adjacent to the specified tag. This combination selects only one tag next to the specified tag.
Child Selector (>): This selector selects the immediate child of the specified tag. It selects only the second selector next to the parent.
Descendant Selector (space): It is used to select all the child elements of the specified tag.

Example of a general sibling selector:

<!DOCTYPE html>
<html>
<head>
<style>
div ~p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p id="para1">Hello Example</p>
<p class=”center”>This is to learn CSS selectors</p>
<h1 class="center"> Welcome to Selectors </h1>
</div>
</body>
</html>

Other Types of Selectors

Other types of selectors are explained below with examples.

Pseudo Class Selector

This type of selector selects the elements in a particular state. It starts with the colon symbol (:)

Some examples of pseudo-states are hover and focus. These are some states of the behavior of HTML elements.

Example:

h1 :hover {
background-color: pink }

Pseudo Element Selector

Pseudo-elements behave in the same way. It starts with a double colon (::)

You can combine the Pseudo class and Pseudo elements.

Example:

p::firstline {
background-color : pink }

Wrapping Up

CSS selectors are a flexible tool that empowers you to control the style of the website. They choose components referred to as the "Subject of the selector". Understanding and imposing CSS selectors can substantially beautify your web page's appearance and aesthetic revel in, supplying you with the strength to create visually appealing designs. CSS selectors are faster and easier to examine and put into effect than XPath. CSS selector lists are an effective tool for green styling. There are various kinds of CSS selectors, each with its specific functionality and use cases, inclusive of type, magnificence, ID, and attribute selectors.

FAQs

1. What are CSS selectors?

CSS selectors are part of CSS rules that help to style particular elements or complete web pages.

2. What are the types of CSS selectors?

There are different types of CSS selectors. Type, ID, Class, Group, and universal selector are significant types.

3. What is the universal selector?

The universal selector applies the style to the whole document and all HTML page elements.

4. How specific should selectors be?

You must adequately define which type of CSS you are going to implement. Based on the implementation, the respective CSS selector style will apply.

5. Can I combine multiple selectors?

Yes, you can combine multiple selectors in CSS to target particular elements.

6. Are CSS selectors faster than XPath?

Yes, CSS selectors are faster than XPath, which has more consistency.

7. How do you select two selectors in CSS?

You can use CSS Combinator to select more than one selector. Various types of combinations can be made. This is explained in the above CSS Combinator section.

8. Where is the CSS selector?

To find a CSS selector on a webpage, right-click and select 'Inspect' on the desired element. This will open the browser's developer tools.

Join 10M+ Learners & Transform Your Career

Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.

upGrad Learner Support

Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)

Indian Nationals

1800 210 2020

Foreign Nationals

+918045604032

Disclaimer

1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.

2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.