jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-18 07:03:01 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): Add interactive examples to * selector lesson (#62772)

Browse Source
This commit is contained in:
Ariz Faiyaz
2025-10-14 00:53:35 +05:30
committed by GitHub
parent baffca7ce7
commit b45ed39cd9
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-the-universal-selector
---
# --description--
# --interactive--
The universal selector (`*`) is a special type of CSS selector that matches any element in the document.
@@ -15,6 +15,15 @@ The universal selector can be used to select all elements within a specific cont
Here is an example of using the universal selector for setting the `margin` and `padding` for the entire HTML document:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<h1>Heading element</h1>
<p>example paragraph element</p>
```
```css
* {
margin: 0;
@@ -22,6 +31,8 @@ Here is an example of using the universal selector for setting the `margin` and
}
```
:::
In this code example, the `*` selector resets the margin and padding of all elements to zero, which is a common technique used in CSS resets.
The universal selector has the lowest specificity value of any selector. It contributes 0 to all parts of the specificity value `(0, 0, 0, 0)`.
@@ -30,6 +41,8 @@ This means that any other selector, including type selectors, class selectors, I
Let's take a look at the following HTML and CSS example:
:::interactive_editor
```html
<head>
<style>
@@ -52,6 +65,8 @@ Let's take a look at the following HTML and CSS example:
</body>
```
:::
The universal `*` selector sets the text color to `blue` for all elements.
However, the `p` type selector overrides this by setting the text color to `red` specifically for `p` elements.
@@ -191,3 +206,4 @@ Consider the highest specificity.
## --video-solution--
4