-
Hajipur, Bihar, 844101
CSS Selectors
CSS selectors are used to select HTML elements that you want to style. They form the foundation of CSS because without selectors, styles cannot be applied to specific parts of a webpage. A selector tells the browser exactly which elements should receive the defined styles. In this chapter, you will learn what CSS selectors are, why they are important, and the different types of selectors used in CSS with clear explanations and examples.
What Are CSS Selectors
A CSS selector is the part of a CSS rule that targets one or more HTML elements. The selector comes before the declaration block and defines where the styles should be applied.
Example
p {
color: blue;
}
Here, p is the selector, and it targets all paragraph elements on the page.
Selectors allow developers to control styles precisely and efficiently.
Why CSS Selectors Are Important
CSS selectors help apply styles in a structured and organized way. Some key benefits include:
-
Allow styling of specific elements
-
Reduce repeated code
-
Improve readability and maintenance
-
Enable complex layouts and designs
-
Improve performance when used correctly
Choosing the right selector ensures clean and predictable styling.
Element Selector
The element selector targets HTML elements by their tag name.
Example
h1 {
color: green;
}
This rule applies to all <h1> elements.
Use Case
Element selectors are useful when you want to style all elements of the same type consistently.
Class Selector
The class selector targets elements with a specific class attribute. It is written using a dot (.) followed by the class name.
Example
.highlight {
background-color: yellow;
}
<p class="highlight">Important text</p>
Use Case
Class selectors are reusable and commonly used for styling multiple elements in the same way.
ID Selector
The ID selector targets an element with a specific id attribute. It is written using a hash (#) followed by the ID name.
Example
#mainTitle {
font-size: 32px;
}
<h1 id="mainTitle">CSS Selectors</h1>
Rules
-
An ID must be unique on a page
-
IDs should not be reused
ID selectors have higher priority than class and element selectors.
Universal Selector
The universal selector selects all elements on a page. It is represented by an asterisk (*).
Example
* {
margin: 0;
padding: 0;
}
Use Case
Commonly used to reset default browser styles.
Grouping Selector
Grouping selectors allow you to apply the same styles to multiple selectors by separating them with commas.
Example
h1, h2, h3 {
color: navy;
}
This reduces repetition and keeps CSS clean.
Descendant Selector
The descendant selector selects elements that are inside another element.
Example
div p {
color: blue;
}
This rule targets all <p> elements inside a <div>.
Child Selector
The child selector selects elements that are direct children of a specific element. It uses the greater-than symbol (>).
Example
ul > li {
list-style-type: square;
}
This applies only to direct child <li> elements of <ul>.
Attribute Selector
Attribute selectors target elements based on the presence or value of an attribute.
Example
input[type="text"] {
border: 1px solid gray;
}
This selects only text input fields.
Pseudo-class Selector
Pseudo-classes define a special state of an element, such as hover or focus.
Common pseudo-classes
-
:hover -
:active -
:focus -
:visited
Example
a:hover {
color: red;
}
Pseudo-element Selector
Pseudo-elements style specific parts of an element.
Common pseudo-elements
-
::before -
::after -
::first-letter -
::first-line
Example
p::first-letter {
font-size: 24px;
}
Adjacent Sibling Selector
This selector selects an element that comes immediately after another element.
Example
h2 + p {
color: gray;
}
General Sibling Selector
This selector selects all sibling elements that follow a specified element.
Example
h2 ~ p {
font-style: italic;
}
Combining CSS Selectors
Selectors can be combined to create more specific targeting.
Example
div.content p.highlight {
color: green;
}
This selects paragraphs with class highlight inside a div with class content.
CSS Selector Specificity
Specificity determines which CSS rule is applied when multiple rules target the same element.
Priority order:
-
Inline styles
-
ID selectors
-
Class, attribute, and pseudo-class selectors
-
Element selectors
Understanding specificity avoids unexpected styling issues.
Common Mistakes with CSS Selectors
Beginners often make these mistakes:
-
Overusing ID selectors
-
Writing overly complex selectors
-
Forgetting dots or hashes
-
Applying styles too broadly
-
Ignoring specificity rules
Writing simple and clear selectors improves performance and maintainability.
Best Practices for Using CSS Selectors
-
Prefer class selectors over IDs
-
Keep selectors short and readable
-
Avoid deep nesting
-
Use grouping selectors when possible
-
Comment complex selectors
These practices help create scalable CSS code.
Summary of CSS Selectors
CSS selectors are the core mechanism used to apply styles to HTML elements. They allow precise control over which elements receive styling. By understanding different selector types such as element, class, ID, attribute, pseudo-class, and pseudo-element selectors, you can write clean, efficient, and maintainable CSS. Mastering selectors helps you build flexible designs and avoid conflicts in large projects.
Practice Questions
Q1. Target all <p> elements and change their font size to 16px.
Q2. Style all <h1> and <h2> elements to have blue text color using a group selector.
Q3. Create a class .highlight and apply a yellow background color.
Q4. Write a rule to target an element with ID #banner and make its text bold.
Q5. Use the universal selector to remove all margins.
Q6. Create a .button class that changes text color to white.
Q7. Write a CSS rule to apply a font family of Arial to all <div> elements.
Q8. Combine a group selector to style <ul> and <ol> with the same padding.
Q9. Write a class .card to set the border to 1px solid gray.
Q10. Write a rule that applies the same font size to <h1>, <h2>, and <p> elements.
