Inheritance

The beloved family ties

In CSS, inheritance is like a chaotic family reunion where everyone is somehow connected. Parents pass their styles down to their children, children pass them on to their descendants, and suddenly everyone in the room is wearing the same color and font — whether they like it or not. It’s as if the clan elders have decided that everyone must wear the same robe.

But it’s not just about parents and children. There are also siblings, who can influence each other by appearing next to or after their relatives. If you want to get particularly creative, you can give specific relatives individual styles while the rest stick to tradition.
All this ensures that your webpage looks like one big, happy family.

Let’s Keep Going

inherit
General Descendants
Child Selector >

Adjacent Sibling Selector +
General Sibling Selector ~
Grandchildren

Relationships in the family

so that you address everyone correctly

inherit

The Passing Down of Family Bonds

With the inherit spell, an element proudly adopts the traits of its parents, as if declaring: “If my father looks like this, then so do I!”

p {
    font-size: inherit;
}

This spell ensures that all paragraphs inherit the font size of their ancestors—like a well-preserved family tradition.

General Descendants

The Far-Reaching Ancestor Spell

The general descendant selector is like the wise elder at the family reunion, ensuring that all descendants adopt the same style. Whether high up in the family tree or hidden deep in its branches, no descendant escapes its influence.

.parent p {
    color: red;
}

A simple space in CSS, and the entire lineage of paragraphs glows in magnificent red.

Child Selector >

The Loving Parent’s Gaze

The child selector is like the strict aunt who only cares for her immediate children. No attention is given to distant relatives—only the direct offspring of an element is affected by this precise spell.

.parent>p {
    color: dodgerblue;
}

This spell colors all direct child paragraphs of a parent element in red.

Adjacent Sibling Selector +

The Eternal Sibling Rivalry

Siblings can influence each other—just like in any family. The adjacent sibling selector lets you connect directly neighboring elements with a magical touch.

h2+p {
    background-color: black;
}

Here, you color the next paragraph after an h2 in black—because siblings sometimes need to stand out with their colors.

General Sibling Selector ~

The Distant Cousins

Sometimes, it’s not just about direct siblings, but also all the cousins who show up at the family gathering. The general sibling selector works on all siblings, no matter how many elements stand between them.

h3~p {
    color: red;
}

One spell, and all paragraphs following an h3 glow in red—no matter how far apart they are.

Grandchildren

The Magical Grandkids That Don’t Exist

In CSS, there are spells for parents, children, and siblings, but what about the poor grandchildren? Unfortunately, there’s no specific spell just for them. The child selector cares for direct children, while the descendant selector affects all descendants. But for grandchildren? You have to make do with the existing spells. Perhaps one day, CSS wizards will invent a “grandparent spell,” but until then, it remains an unfulfilled wish!

In this lesson, you have learned…

How inherit ensures that child elements take on the properties of their parents to maintain consistent styles.
Why the general descendant selector ( ) reaches all subordinate elements, regardless of their position in the family tree.
How the child selector (>) targets only direct child elements without affecting distant descendants.
When to use the adjacent sibling selector (+) to directly access the next element at the same level.
How the general sibling selector (~) works to style all following siblings of an element, no matter how far apart they are.

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!

Family Secrets

In the sunny forests of Sunnyside Fields, there lives a magical family whose members are closely connected. To understand their magic, you must uncover the relationships and inheritance between them through CSS. Use the various selectors to explore the connections between parents, children, and siblings.

Your Task: The Magic of Kinship

General Descendants (.parent p): Write a rule that applies to all <p> tags within the .parent class. Set the font color to red.
Question: Which elements are affected?
Question: Why is this selector so flexible?
Child Selector (>): Use the child selector to style the direct child element .child > p. Set the font color to lightblue.
Question: What happens when you use this selector?
Question: How does it differ from general descendants?
Adjacent Sibling Selector (+): Style the sibling element .parent p + p and set the font color to orange.
Question: Why is only the next sibling element affected and not all of them?
General Sibling Selector (~): Use the general sibling selector .parent h1 ~ p to style all <p> tags following the <h1> tag. Set their text color to green.
Question: Which elements are affected?
Question: Why is this selector useful?
Reflection: Describe the different selectors you used and which elements they affected.

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

.parent p {
    color: red;
}

.child>p {
    color: lightblue;
}

.parent p+p {
    color: orange;
}

.parent h1~p {
    color: green;
}

Let’s Keep Going