gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(curriculum): add interactive examples to css combinators lesson (#62765)

Browse Source
This commit is contained in:
Ariz Faiyaz
2025-10-14 05:05:03 +05:30
committed by GitHub
parent 16b9528fd7
commit 5186d7c6fd
1 changed files with 85 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-what-is-css/672acc100d59d24da7b4e09c.md
+85 -10
View File
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-are-the-different-types-of-css-combinators
---
# --description--
# --interactive--
CSS combinators are used to define the relationship between selectors in CSS. They help in selecting elements based on their relationship to other elements, which allows for more precise and efficient styling.
@@ -15,13 +15,26 @@ A descendant combinator is used to target elements matched by the second selecto
To better understand how this works, let's take a look at an example.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Relaxing Cat">
<figcaption>A relaxing cat with a border</figcaption>
</figure>
```
```css
figure img {
border: 4px solid black;
border: 4px solid red;
}
```
In the above example, we use the descendant combinator to select all image elements inside `figure` elements and apply a `solid black` border on all four sides.
:::
In the above example, we use the descendant combinator to select all image elements inside `figure` elements and apply a `solid red` border on all four sides.
Note that a `space` is used between the parent and child selector.
@@ -37,18 +50,22 @@ This combinator targets only elements with a specific parent, making your CSS ru
Let's take a look at the following HTML example:
:::interactive_editor
```html
<div class="container">
<p>First</p>
<div>
<p>Second</p>
</div>
<div>
<p>Third</p>
</div>
<p>First</p>
<div>
<p>Second</p>
</div>
<div>
<p>Third</p>
</div>
</div>
```
:::
In above HTML structure, the `container` class is applied to a `div` element.
Inside this container, there is a direct child `p` element ("First"), followed by two additional `div` elements, each containing a `p` element ("Second" and "Third").
@@ -57,12 +74,30 @@ The first `p` element is a direct child of the `.container` element, while the o
To apply styles to just the direct child of the `container` class, you can use the child combinator like this:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div class="container">
<p>First</p>
<div>
<p>Second</p>
</div>
<div>
<p>Third</p>
</div>
</div>
```
```css
.container > p {
color: blue;
}
```
:::
In the above example, we are only targeting the direct child of `container` class. This will give the direct child the text color of `blue`.
Because the other two paragraph elements are nested inside `div` elements, they are not considered direct children of the `container` class and will not get the text color of blue.
@@ -73,6 +108,8 @@ The next-sibling combinator (`+`) in CSS selects an element that immediately fol
Let's take a look at the following HTML example:
:::interactive_editor
```html
<figure>
<img
@@ -83,16 +120,34 @@ Let's take a look at the following HTML example:
</figure>
```
:::
Here, we have a `figure` element containing an `img` element followed by a `figcaption` element. The `figcaption` element is the immediate sibling of the `img` element.
If you wanted to apply a black border around the `figcaption` element, you can use the next-sibling combinator like this:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<figure>
<img
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
alt="A cute orange cat lying on its back."
/>
<figcaption>A cute orange cat lying on its back.</figcaption>
</figure>
```
```css
img + figcaption {
border: 4px solid black;
}
```
:::
In this example, the next-sibling combinator (`+`) selects the `figcaption` element that immediately follows the `img` element. The applied CSS rule adds a `4px solid black border` around the `figcaption`.
Another common combinator is the subsequent-sibling combinator.
@@ -103,6 +158,8 @@ Unlike the next-sibling combinator, which targets only the immediately following
Let's take a look at the following HTML example:
:::interactive_editor
```html
<div class="container">
<h2>Subheading</h2>
@@ -113,16 +170,34 @@ Let's take a look at the following HTML example:
</div>
```
:::
In this HTML structure, we have an `h2` element followed by four paragraph elements. The paragraph elements are siblings of the `h2` element.
If you want to style all of the paragraph elements that come after the `h2` element, then you can use the subsequent-sibling combinator like this:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div class="container">
<h2>Subheading</h2>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Another paragraph element</p>
</div>
```
```css
h2 ~ p {
color: green;
}
```
:::
In this example, all paragraph elements following the `h2` element will have the text color green.
The subsequent-sibling combinator (`~`) targets all paragraph siblings that appear after the `h2` element, regardless of whether they are immediate siblings.