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

What this code does: Selects every p element and sets its text color to blue a simple full-page example of an element selector in action.

<!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.

What this code does: Styles both paragraphs with blue text and a 20px font size by targeting the p tag name.

<!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.

What this code does: Applies a yellow background and padding only to the paragraph that has class="highlight"; the other paragraph stays unstyled.

<!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.

What this code does: Targets the single element with id="title" and makes its text red and centered.

<!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.

What this code does: Sets the font family of every element on the page (heading, paragraph, and button) to Arial.

<!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.

What this code does: Applies the same navy text color to h1, h2, and p in one rule instead of writing three separate rules.

<!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

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”.

What this code does: Styles only paragraphs that have class="note" with green, bold text; other paragraphs are left unchanged.

<!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

What this code does: Combines element, class, ID, and combined selectors in one page so you can see blue headings, a yellow highlighted paragraph, a centered title, and a green note paragraph together.

<!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