CSS Selectors
CSS selectors are used to target HTML elements that you want to style. They are a core concept of CSS.
What are CSS Selectors?
CSS selectors define which HTML elements a set of CSS rules will apply to. There are many types of selectors in CSS.
1. Element Selector
The element selector selects HTML elements based on their tag name.
Example 1: Element Selector
p {
color: blue;
font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This text is styled using the element selector.</p>
</body>
</html>
Output
This text is styled using the element selector.
Explanation:
• Targets all <p> elements
• Simple and easy to use
• Targets all <p> elements
• Simple and easy to use
2. Class Selector
The class selector selects elements with a specific class attribute.
It starts with a dot (.).
Example 2: Class Selector
.highlight {
color: green;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.highlight {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">This text uses a class selector.</p>
</body>
</html>
Output
This text uses a class selector.
Explanation:
• Targets elements with a specific class
• Most commonly used selector
• Targets elements with a specific class
• Most commonly used selector
3. ID Selector
The ID selector selects a single element with a unique ID.
It starts with a hash (#).
Example 3: ID Selector
#main-title {
color: red;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main-title {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p id="main-title">This text is styled using an ID selector.</p>
</body>
</html>
Output
This text is styled using an ID selector.
Explanation:
• Targets only one unique element
• Has higher priority than class and element selectors
• Targets only one unique element
• Has higher priority than class and element selectors
4. Group Selector
The group selector applies the same styles to multiple selectors.
Example 4: Group Selector
h1, h2, p {
color: purple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1,
h2,
p {
color: purple;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph</p>
</body>
</html>
Explanation:
• Styles multiple elements at once
• Improves readability
• Styles multiple elements at once
• Improves readability
Important Notes
✔ ID selectors have higher priority than class selectors
✔ Class selectors are reusable
✔ Avoid overusing ID selectors
✔ Class selectors are reusable
✔ Avoid overusing ID selectors
Frequently Asked Questions (FAQ)
Which selector is used most?
Class selectors are the most commonly used because they are reusable.
Can I combine selectors?
Yes, CSS allows combining multiple selectors for precise targeting.
Which selector has the highest priority?
ID selectors have higher priority than class and element selectors.