diff --git a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md index 432870af0c3..66915cf41fa 100644 --- a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md +++ b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md @@ -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 + +

Example paragraph

+``` + ```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 + + +

Example paragraph

+

Example paragraph

+

Another paragraph

+

Yet another paragraph

+``` + ```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--