Pseudo-Classes

The Secret Tricks of CSS Sorcerers

Welcome to the realm of pseudo-classes, the invisible guardians of your elements. They allow you to read between the lines of your HTML, granting you power to whisper subtle commands to your elements. Imagine telling an element, “Hey, you there! Only do something special when you’re the third child!”

With pseudo-classes, you master this secret trick of CSS magic. They function like unseen spells, animating your website without lifting a finger. From hovering effects to selecting specific elements in a sequence, they offer limitless possibilities to refine your designs.

Embrace this mystical power and turn your website into a truly magical experience!

Let’s Keep Going

:nth-child
:nth-child(odd) / (even)
:first-child
:last-child
:nth-of-type

:not
:is
:has
:where

Pseudo-Classes

The secret power of selectors

:nth-child

Parents’ Favorite

With :nth-child, you can target any element at a specific position within a group of siblings. Imagine a line of rabbits sitting on a meadow, and you want only the third one to stand up and hop around. With :nth-child(3), it works as if you’ve waved a magic wand! This level of precision gives you control over your designs with elegance and ease.

.bunny:nth-child(3) {
    color: brown;
}

The .bunny element in the third position is styled with a brown color.

:nth-child(odd) / (even)

Odd and Even Magic

With odd and even, counting becomes enchanting. You can grant a spell to every bunny in an even position like 2, 4, or 6, or highlight those in odd spots like 1, 3, and 5. Even the largest rows are effortlessly organized, as if each bunny instinctively knows when it’s their turn!

.bunny:nth-child(odd) {
    color: black;
}

All odd .bunny elements are colored black.

:first-child

The Eldest Child Gets the Crown

:first-child is the favorite, the eldest in the family. It often receives special treatment. This pseudo-class applies your magic only to the first element in a group. The other siblings? They just watch in envy.

.bunny:first-child {
    color: gold;
}

The first .bunny element is highlighted in gold.

:last-child

The Youngest Child that Gets It All

:last-child is the youngest in the family, often treated as the special one. It’s always the last element of its parent and deserves its own spell. No matter how many siblings there are, :last-child stands as the baby of the group, receiving its own magical touch.

.bunny:last-child {
    color: white;
}

The last .bunny element is styled with white text color.

:nth-of-type

Birds of a Feather Flock Together

While :nth-child counts all the children of a parent, :nth-of-type focuses solely on siblings of the same type. It’s like searching only for the dogs in a house full of pets, ignoring how many cats and hamsters are around.

.bunny:nth-of-type(2) {
    color: white;
}

The second .bunny element of the same type (e.g., <div>, <p>) is styled with white text color.

:not

The Exclusion Spell

Sometimes, you want to enchant everything on the page except for one thing. Enter :not. With this spell, you can declare: “Do everything, but leave this one item untouched!” This keeps your magic flexible without neglecting the rest.

.bunny:not(.baby) {
    color: pink;
}

All .bunny elements that do not have the .baby class are styled with a pink background color.

In this lesson, you have learned…

How to use :nth-child(n) to target specific elements based on their position within a parent element.
Why :nth-child(odd) and :nth-child(even) are useful for creating patterns in long lists or tables.
How :first-child and :last-child help you style the first or last element in a group individually.
How :nth-of-type(n) differs from :nth-child(n) by only counting elements of a specific type.
How :not() allows you to exclude elements and apply styles only to selected groups without writing redundant rules.

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 Shadowed Paths

The corridors of the shadowy fortress are riddled with riddles and intricate paths, revealing their secrets only to those who master the ancient magic of pseudo-classes. With the power of nth-child, first-child, last-child, and other mystical spells, you’ll illuminate the hidden ways and teach Umbra a lesson in true cleverness – for who needs shadows when armed with light?

Your Task: Master Pseudo-Classes

Apply :nth-child to alternate box styles for odd and even positions. Watch how each box adapts based on its order in the container.
Style with :first-child and :last-child to highlight the beginning and end of your element group. Useful for special accents or emphasis.
Use :nth-of-type to specifically target the third element of a certain type, noting how it counts only matching elements rather than all children.
Apply :not() to exclude elements such as the first item, and style all others differently without writing multiple selectors.
Combine pseudo-classes like :nth-child with :not() to create refined, precise styling conditions for complex layouts.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

/* Pseudo-Classes */
.box:nth-child(odd) {
    background: #e74c3c;
}

.box:nth-child(even) {
    background: #3498db;
}

.box:first-child {
    border: 2px solid #2ecc71;
    box-shadow: 0 0 15px #2ecc71;
    transform: scale(1.1);
}

.box:last-child {
    border: 2px solid #f1c40f;
    box-shadow: 0 0 15px #f1c40f;
    transform: scale(1.1);
}

.box:nth-of-type(3) {
    background: #9b59b6;
}

.box:not(:nth-child(1)) {
    opacity: 0.9;
}

/* Hover-Effects */
.box:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3);
    color: #222;
}

Let’s Keep Going

:is

The Mighty Yet Elegant

Sometimes, you want to tackle multiple tasks at once because there’s just no time to handle them individually. Enter :is(), your trusty ally. Imagine you want to style a group of elements all at once. Instead of addressing each one separately, :is() steps in and says, “No problem, I’ve got them all covered.” It’s like being a magician, but in reality, :is() is the one doing all the work!

.parent :is(p.bunny, h3.bunny) {
    color: white;
}

This CSS rule will style all p elements with the .bunny class and all h3 elements with the .bunny class inside .parent, turning their text color to white.

:has

The Most Vigilant of All

Ah, and here we have :has(), the guardian. :has() isn’t like the others that simply follow orders. No, :has() looks around, raises an eyebrow, and asks, “Are the conditions met?” Only when :has() confirms the presence of certain elements does it spring into action. Want an element to react only when another is nearby? Then :has() is your clever agent, taking care of the essentials.

.parent:has(.flower) {
    border: 3px solid orange;
}

If .parent contains a child element with the class .flower, it receives an orange border.

:where

The Humble Companion

:where() is like that quiet ally who works diligently behind the scenes without seeking any recognition. It performs all the tasks that :is() can, but does so as if it wasn’t even there. You assign a task to :where(), and it gets to work, leaving space for others to step in with their ideas later. It’s like offering a suggestion while humbly letting others take the lead if needed.

:where() is friendly, supportive, and, above all, modest – it doesn’t want to impose specificity, ensuring that other rules with higher importance can take precedence. It’s the kind of CSS helper you didn’t know you needed, but one you’ll always appreciate.

.parent :where(p.bunny) {
    color: white;
}

This rule ensures that all
elements with the class .bunny inside .parent are styled with a white color, while :where() keeps the rule from increasing specificity, allowing other styles to override it if needed.

In this lesson, you have learned…

How to use :is() to group multiple selectors efficiently into a single rule, simplifying your code and improving readability.
Why :has() is powerful: It allows you to style an element only if it contains certain child elements—unlocking a new level of conditional styling.
How :where() helps define rules without adding specificity, making it easier for later styles to override them if needed.
Why :where() is different from :is(): Unlike :is(), it adds no specificity, making it ideal for broad, general-purpose styles that stay unobtrusive.

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 Search Paths

In the dark shadows of the fortress, whispers speak of secret passages that can only be revealed through the powerful magic of the pseudo-classes :is, :has, and :where. These spells are so precise that you could rearrange the fortress’s furniture with them—if furniture had CSS selectors. Use them wisely to outwit the fortress and glide like a true shadow acrobat through its most hidden corners.

Your Task: Apply the New Pseudo-Classes

Use :is for groups of elements: Apply the :is pseudo-class to style multiple elements at once, such as .level-1 and .level-3. Observe how both elements share the same style without duplicating code.
Leverage :has for elements with substructures: Use :has to identify elements containing specific child elements, like a list (ul) or paragraphs (p). Test how the styling adapts when a particular element is present.
:where for flexible selectors: Utilize :where with .level-2 and .level-4 to define styles for multiple elements while maintaining low specificity. Observe how the styles seamlessly apply across all selected elements.
Combine pseudo-classes for targeted selection: Merge :has with first-child to style the first p element within boxes that contain paragraphs. Test how this combination enables precise customization.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

.box:is(.level-1, .level-3) {
    background: #3498db;
    border: 2px solid #2980b9;
}

.box:has(ul) {
    border: 2px dashed #e74c3c;
    background: #2c3e50;
}

.box:has(p) p:first-child {
    font-weight: bold;
    color: #1abc9c;
}

.box:where(.level-2, .level-4) {
    margin-left: 20px;
    background: #9b59b6;
    border: 2px solid #8e44ad;
}

Let’s Keep Going