I want to be red and larger than the other text.
I want to be normal sized and the default color.
I want to be red and larger than the other text.
I want to be normal sized and the default color.
A paragraph of text with some bold text for emphasis.
The parent element is the `` which contains text. Inside that `
` element is a `` element, making its content bold.
Because it is inside the ` `, it is a child element.
A descendant combinator allows us to target a child element.
This uses a space () to instruct the browser to look for child elements:
p strong {
color: blue;
}
This snippet selects all `` elements
that are child elements of ` ` elements only, making them blue recursively.
Because the descendant combinator is recursive, the padding added to each child element applies, resulting in a staggered effect.
This effect is better visualised in the above example,
using the combinator selector, `.top div`.
That CSS rule adds left padding to those `` elements.
Because the combinator is recursive,
all `` elements that are in `.top` will have that same padding applied to them.
Take a look at the HTML panel in this demo
to see how the `.top` element has several `` child elements which themselves,
have `` child elements.
#### Next sibling combinator
You can look for an element that immediately follows another element
by using a `+` character in your selector.
To add space between stacked elements,
use the next sibling combinator to add space
*only* if an element is a **next sibling** of a child element of `.top`.
You could add margin to all child elements of `.top`,
using the following selector:
.top * {
margin-top: 1em;
}
The problem with this is that because you're selecting every child element of `.top`,
this rule potentially creates extra, unnecessary space.
The **next sibling combinator** ,
mixed with a **universal selector** enables you to not only control what elements get space,
but also apply space to **any element** .
This provides you with some long-term flexibility,
regardless of what HTML elements appear in `.top`.
#### Subsequent- sibling combinator
A subsequent combinator is very similar to a next sibling selector.
Instead of a `+` character however,
use a `~` character.
How this differs is that an element just has to follow another element with the same parent,
rather than being the next element with the same parent.
Use a subsequent selector along with a \`:checked\` pseudo class to create a pure CSS switch element.
This subsequent combinator provides a little less rigidity,
which is useful in contexts like the above sample,
where we change the color of a custom switch when its associated checkbox has the `:checked` state.
#### Child combinator
A child combinator (also known as direct descendant)
allows you more control over the recursion that comes with combinator selectors.
By using the `>` character, you limit the combinator selector to apply **only** to direct children.
Consider the previous, next sibling selector example.
The space is added to each **next sibling** ,
but if one of those elements also has **next sibling elements** as children,
it can result in undesirable, extra spacing.
To alleviate this problem,
change the **next sibling selector** to incorporate a child combinator: `> * + *`.
The rule will now **only** apply to direct children of `.top`.
### Compound selectors
You can combine selectors to increase specificity and readability.
For example, to target `` elements,
that also have a class of `.my-class`, write the following:
a.my-class {
color: red;
}
This wouldn't apply a red color to all links
and it would also only apply the red color to `.my-class` **if** it was on an `` element.
For more on this, see the [specificity module](https://web.dev/learn/css/specificity).
### Check your understanding
Test your knowledge of complex selectors
Which of the following symbols is **not** a selector combinator?
\> The direct descendant combinator. ÷ Invalid, not a CSS symbol. + The next sibling combinator. \* This universal simple selector. . The class simple selector.
```css
section.awesome {
border: 1px solid hotpink;
}
```
The above selector is an example of a...
Combinator A symbol used to combine selectors into a more specific one. Compound selector When 2 or more selectors are used together, without a combinator, in order to create a more specific selector. Terminator Not a selector type, but sounds like one doesn't it? 🤖
## Resources
- [CSS selectors reference](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)
- [Interactive selectors game](https://flukeout.github.io/)
- [Pseudo-class and pseudo-elements reference](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
- [A tool that translates CSS selectors into plain-english explainers](https://kittygiraudel.github.io/selectors-explained/)