CSS Selectors
Learn to Enchant Elements with a Snap of Your Fingers
CSS selectors are magical commands that let you target specific HTML elements to give them a touch of style. Each selector has its own unique power — from the elegance of targeting a single element to enchanting entire groups at once. Want to highlight a heading or give a whole horde of paragraphs a new outfit? No problem! The right selectors make it possible.
The world of CSS selectors is like a colorful bazaar, brimming with tricks and transformations. With a bit of practice and the right selection, you can design your webpage to look as if elves and wizards worked on it — all without a single speck of real magic dust.
Simple selectors
Why complicate things when you can keep things simple?
The Universal Selector*
The Almighty Star Spell
The universal selector (*) is like an all-encompassing star spell that touches every creature and object in the kingdom of HTML.
* {
margin: 0;
}With a blink of an eye, it removes
all spacing from all elements.
The Element Selector
The Targeted Call
The element selector is like a call for specific elements. It addresses these elements precisely and enchants them with a touch of style.
p {
color: red;
}When the wizard calls p, all paragraphs are displayed in red.
The ID Selector #
The Unique Spell
The ID selector is a specialized spell that targets only one unique element. No other element can share the same name, or confusion arises.
#header {
background: blue;
}The artist calls “header,” and presto—the background of the element turns a vibrant blue.
The Class Selector .
The Friendly Gathering Spell
The class selector is the party planner of selectors. It ensures that all elements with the same class dress up in their finest attire.
.cap {
background: red;
}When the artist casts the gathering spell, all elements with the class cap shine in a bold red, ready for the show.
The Descendant Selector
The Wise Ancestral Call
The descendant selector uses the parent for context, but moves the spotlight onto its descendants. It’s like a family heirloom passed down through generations.
div img {
width: 300px;
}When the artist murmurs “div img,” all images within a div hear the call and adopt their new width of 300px.
The Grouping Selector
Unity in Design
With the grouping selector, the artist can make an entire crowd of elements shine in the same light. Place a comma between them, and suddenly h2 and p are dressed in matching green, ready for the group photo.
h2, p {
color: green;
}When the wizard uses the grouping selector, like in this example, the h2-heading and the paragraph are both displayed in green.
Other Curious Selectors
For True Masters Only
Then there are the truly exotic spells:
- Attribute selectors to unlock hidden treasure chests,
- Pseudo-classes that make elements dance when you hover over them,
- Pseudo-elements, like invisible stagehands handling the finer details.
But beware! These tricks are for true masters — or those fueled by copious amounts of coffee.
In this lesson, you have learned…
- How the universal selector * affects all elements on your page to make global adjustments.
- Why element, ID, and class selectors are important for styling individual or multiple elements precisely.
- How the descendant selector penetrates structures to apply styles only to nested elements.
- Why the group selector is useful for styling multiple elements at once with the same styles.
Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!
The Hidden Signs
In an ancient ruin deep in the heart of Sunnyside Fields, the scholar Lyrian has discovered an encrypted inscription. To unlock its secrets, you must use magical CSS selectors to reveal the signs and their meanings. Use various CSS selectors to style the elements in the codex and bring its mysteries to light.
Your Task: Applying Selectors
You have a simple HTML document with the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Hidden Signs</title>
<link rel="stylesheet" href="css/06-style.css">
</head>
<body>
<h1 id="title">Welcome to the Codex</h1>
<div class="section">
<p>This is an ancient text section.</p>
</div>
<div class="highlight">
<p>Important information!</p>
</div>
</body>
</html>
- Universal Selector (*): Use the universal selector to assign a text color to all elements. Set the color to blueviolet.
Question: How does this affect the entire document? - Element Selector: Apply the element selector to all
<p>tags and give them an italic font style (font-style: italic;).
Question: What happens when this selector is applied? What are the advantages of using an element selector? - ID Selector (#): Style the
<h1>element with the ID title. Set its background to pink.
Question: What is the advantage of using an ID selector, and when might it be useful? - Class Selector (.): Use the class selector to set the background of the class highlight to orange.
Question: How does this affect the specific section with the class? - Descendant Selector: Use a descendant selector to style the
<p>tag within the class highlight. Set its font color to white.
Question: Why is this selector useful for applying more specific styles? - Grouping Selector: Use a grouping selector to assign the same font family (
'Arial', sans-serif) to both the<h1>element and the highlight class.
Question: What are the benefits of styling multiple elements at once using a grouping selector?
Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Hidden Signs</title>
<link rel="stylesheet" href="css/06-style.css">
</head>
<body>
<h1 id="title">Welcome to the Codex</h1>
<div class="section">
<p>This is an ancient text section.</p>
</div>
<div class="highlight">
<p>Important information!</p>
</div>
</body>
</html>* {
color: blueviolet;
}
p {
font-style: italic;
}
#title {
background: pink;
}
.highlight {
background: orange;
}
.highlight p {
color: white;
}
h1,
.highlight {
font-family: Arial, Helvetica, sans-serif;
}