CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(curriculum): update interactive examples in CSS specificity lesson (#62795)

Browse Source
This commit is contained in:
Ariz Faiyaz 2025-10-15 05:58:05 +05:30 committed by GitHub
parent 5c116f0972
commit 598ecbe2cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-the-specificity-for-class-selectors
---
# --description--
# --interactive--
Class selectors are a key part of CSS, allowing developers to target multiple elements with the same class attribute and apply consistent styling.
@ -15,12 +15,21 @@ Class selectors are defined by a period (`.`) followed by the class name. They c
Here is an example using a class selector:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<p class="highlight">Example paragraph</p>
```
```css
.highlight {
color: green;
}
```
:::
In this example, any element with the class `highlight` will have its text color set to `green`.
Class selectors have a higher specificity than type selectors but lower than ID selectors and inline styles.
@ -31,13 +40,26 @@ Class selectors can be combined with other selectors to create more specific rul
Here is an example combining a paragraph type selector with a class selector:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<p class="bold-text">Example paragraph</p>
<p class="bold-text">Example paragraph</p>
<p>Another paragraph</p>
<p>Yet another paragraph</p>
```
```css
p.highlight {
p.bold-text {
font-weight: bold;
}
```
This rule applies only to `p` elements that also have the `highlight` class, making their text bold.
:::
This rule applies only to `p` elements that also have the `bold-text` class, making their text bold.
# --questions--