CSS Selectors

What are CSS Selectors?

CSS selectors are used to select HTML elements that you want to style. A selector tells the browser which element or group of elements a CSS rule should apply to.

Why are CSS Selectors Important?

Selectors are one of the most important parts of CSS. Without selectors, CSS would not know which HTML elements should receive styles. They help developers target specific elements efficiently and keep styles organized.

Basic Selector Syntax

<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: blue;
}
</style>
</head>
<body>

<p>This paragraph is blue.</p>

</body>
</html>

Element Selector

The element selector selects all HTML elements with a specific tag name. For example, the selector p selects all paragraph elements.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: blue;
    font-size: 20px;
}
</style>
</head>
<body>

<p>First paragraph</p>
<p>Second paragraph</p>

</body>
</html>

Class Selector

The class selector selects elements with a specific class attribute. A period (.) is placed before the class name.

<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
    background-color: yellow;
    padding: 10px;
}
</style>
</head>
<body>

<p class="highlight">Highlighted paragraph</p>
<p>Normal paragraph</p>

</body>
</html>

ID Selector

The ID selector selects a unique element using its id attribute. A hash (#) symbol is placed before the id name.

<!DOCTYPE html>
<html>
<head>
<style>
#title {
    color: red;
    text-align: center;
}
</style>
</head>
<body>

<h1 id="title">Welcome to CSS</h1>

</body>
</html>

Universal Selector

The universal selector (*) selects every element on a web page. It is often used for applying common styles or resetting margins and padding.

<!DOCTYPE html>
<html>
<head>
<style>
* {
    font-family: Arial, sans-serif;
}
</style>
</head>
<body>

<h1>Heading</h1>
<p>Paragraph</p>
<button>Button</button>

</body>
</html>

Grouping Selector

A grouping selector allows multiple selectors to share the same CSS rule. Selectors are separated with commas.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
    color: navy;
}
</style>
</head>
<body>

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>Paragraph text</p>

</body>
</html>

CSS Selector Types

Element

Selects all paragraph elements

Class

.highlight

Selects elements with a class

#title

Selects an element with a specific id

Universal

Selects all elements

Grouping

h1, p

Selects multiple elements

Combining Selectors

Selectors can be combined to target more specific elements. For example, the selector p.note selects only paragraphs that have the class “note”.

<!DOCTYPE html>
<html>
<head>
<style>
p.note {
    color: green;
    font-weight: bold;
}
</style>
</head>
<body>

<p class="note">Important note paragraph</p>
<p>Regular paragraph</p>

</body>
</html>

Complete CSS Selectors Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
}

.highlight {
    background-color: yellow;
    padding: 10px;
}

#mainTitle {
    text-align: center;
}

p.note {
    color: green;
}
</style>
</head>
<body>

<h1 id="mainTitle">CSS Selectors Demo</h1>

<p class="highlight">
This paragraph uses a class selector.
</p>

<p class="note">
This paragraph uses a combined selector.
</p>

<p>
This is a normal paragraph.
</p>

</body>
</html>

Best Practices

Use class selectors for reusable styles.
Avoid excessive use of ID selectors.
Keep selectors simple and readable.
Use meaningful class and ID names.
Group selectors when applying the same styles.
Avoid overly complex selector combinations.

Web Resources on CSS Selectors

1. MDN Web Docs : CSS selectors
2. CSS Tricks.com : CSS Selectors
3. MDN Web Docs : Basic CSS selectors
4. Web.dev : CSS selectors

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.