In this chapter, we dive into how to “target” specific HTML elements. Selectors are the most powerful part of CSS because they allow you to apply styles to exactly the elements you want without affecting the rest of the page.
A CSS selector is the part of a CSS rule set that determines which HTML elements the style will be applied to. There are five main categories of selectors.
1. Simple Selectors
These are the most common selectors used to target elements based on their name, id, or class.
Element Selector
Element Selector targets elements by their tag name.
p { color: blue; } /* Styles all <p> elements */
Id Selector (#)
Id selector targets a unique element with a specific id attribute. An ID must be unique within a page i.e. you cannot use the same id name anywhere in the page. Id is represented by a # symbol in css
#header-main { background-color: yellow; }
Class Selector (.)
Class selector targets all elements with a specific class attribute. You can use the same class on multiple elements in the same webpage. Class is represented by a (.) dot in CSS
.text-center { text-align: center; }
Universal Selector (*)
Universal selector targets every single element on the HTML page. Usually used to reset margins/padding.
* { margin: 0; padding: 0; }
2. Combinator Selectors
Combinator selectors explain the relationship between two or more selectors. While a simple selector might target every <p> tag, a combinator allows you to be much more specific based on where that tag sits in the HTML hierarchy.
These select elements based on a specific relationship between them (parent, child, or sibling).
There are four different combinators in CSS.
Descendant Selectors (space)
The descendant selector matches all elements that are descendants of a specified element. This includes children, grandchildren, great-grandchildren, and so on.
The Syntax: element element
Eg: div p
Selects all <p> inside a <div>
/* Styles ALL <p> elements that are inside a <div> */
div p {
background-color: yellow;
}
Child Selectors (>)
The child selector matches only those elements that are immediate children of a specified element. It does not style “grandchildren.”
The Syntax: element > element
Eg: div > p
Selects only <p> that are immediate children of <div>
/* Styles only <p> elements that are direct children of a <div> */
div > p {
background-color: yellow;
}
Example Explanation:
If you have a <div> containing a <p> and another <span> that contains its own <p>, only the first <p> will be styled.
Adjacent Sibling Selectors (+)
The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and “adjacent” means “immediately following.”
The Syntax: element + element
Eg: div + p
Selects the <p> placed immediately after a <div>
/* Styles the first <p> element that appears immediately after a <div> */
div + p {
background-color: yellow;
}
General Sibling Selectors (~)
The general sibling selector selects all elements that are siblings of a specified element. Unlike the adjacent selector, the second element does not have to come immediately after the first, just anywhere after it within the same parent.
The Syntax: element ~ element
Eg: div ~ p
Selects all <p> that are siblings of a <div>
/* Styles ALL <p> elements that are siblings of a <div> */
div ~ p {
background-color: yellow;
}
3. Pseudo-class Selectors
Pseudo-classes are used to define a special state of an element.
:hover: Styles an element when you move the mouse over it.:active: Styles an element the moment it is clicked.:nth-child(n): Styles the “n-th” child of a parent (e.g.,:nth-child(2)selects the second item in a list).
/* Change button color when hovering */
button:hover {
background-color: orange;
}
4. Pseudo-element Selectors
Pseudo-elements are used to style specific parts of an element.
::first-line: Adds a special style to the first line of a text.::before: Inserts content before the content of an element.::after: Inserts content after the content of an element.
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
5. Attribute Selectors
Targets elements based on the presence or value of a specific attribute.
/* Styles only links that have a target="_blank" attribute */
a[target="_blank"] {
background-color: yellow;
}
Advanced Selector Logic & Syntax
While standard selectors target elements, these syntax rules help you manage your code efficiently as your project grows.
CSS Grouping Selector
Grouping is used to apply the same style to multiple selectors. This reduces code repetition and keeps your stylesheet clean (the DRY principle: Don’t Repeat Yourself).
The Syntax: Separate each selector with a comma ( , ).
/* Grouping h1, h2, and p */
h1, h2, p {
text-align: center;
color: #2c3e50;
font-family: Arial, sans-serif;
}
Note: Without grouping, you would have to write the same three lines of code three separate times.
CSS Nesting Syntax
Nesting allows you to write CSS rules inside other rules, mirroring the hierarchy of your HTML. This is a modern feature (native CSS Nesting) that makes code much easier to read.
The Syntax: Place the child selector inside the curly braces of the parent.
/* Modern Native CSS Nesting */
.nav-card {
background-color: white;
padding: 20px;
/* This targets <h1> inside .nav-card */
h1 {
font-size: 24px;
color: blue;
}
/* This targets <p> inside .nav-card */
p {
font-size: 14px;
}
}
CSS Variables Syntax (Custom Properties)
Variables allow you to store a value (like a specific brand color) in one place and reuse it throughout your entire stylesheet.
The Syntax:
- Define: Start with
--inside the:rootselector. - Use: Use the
var()function.
/* Defining Variables */
:root {
--main-bg-color: #f4f4f4;
--primary-accent: #04AA6D;
--standard-padding: 15px;
}
/* Using Variables */
.container {
background-color: var(--main-bg-color);
padding: var(--standard-padding);
}
button {
background-color: var(--primary-accent);
}
CSS Media Queries Syntax
Media queries are the foundation of Responsive Web Design. They allow you to apply styles only if certain conditions are met, such as a specific screen width.
The Syntax: Use the @media rule followed by the condition.
/* Standard Desktop Style */
body {
background-color: white;
}
/* If screen width is 600px or less (Mobile) */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
.sidebar {
display: none; /* Hide sidebar on small screens */
}
}
Specificity: Which Rule Wins?
If two CSS rules target the same element, the browser follows a hierarchy called Specificity.
- Inline styles (Highest priority)
- IDs
- Classes, pseudo-classes, and attributes
- Elements and pseudo-elements (Lowest priority)