feat: the cascade of css questions The Odin Project (#50700)

2026-09-24 23:01:18 +08:00 · 2023-06-30 13:38:59 +03:00
parent 67379bbd7b
commit f1620e0403
11 changed files with 481 additions and 0 deletions
@@ -958,6 +958,10 @@
      "top-learn-css-foundations-projects": {
        "title": "Learn CSS Foundations Projects",
        "intro": ["A description is to be determined"]
+      },
+      "top-learn-css-specificity": {
+        "title": "Learn CSS Specificity",
+        "intro": ["A description is to be determined"]
      }
    }
  },
@@ -0,0 +1,9 @@
+---
+title: The Odin Project
+superBlock: the-odin-project
+certification: the-odin-project
+---
+
+## The Odin project
+
+Description is to be determined
@@ -0,0 +1,45 @@
+{
+    "name": "TOP Learn CSS Specificity",
+    "dashedName": "top-learn-css-specificity",
+    "isUpcomingChange": true,
+    "helpCategory": "HTML-CSS",
+    "order": 4,
+    "time": "",
+    "template": "",
+    "required": [],
+    "superBlock": "the-odin-project",
+    "challengeOrder": [
+        [
+            "6489bcd7b7600c818dc297ea",
+            "The Cascade of CSS Question A"
+        ],
+        [
+            "6489c96782cf2e4f86f03ae2",
+            "The Cascade of CSS Question B"
+        ],
+        [
+            "6489cb0b82cf2e4f86f03ae3",
+            "The Cascade of CSS Question C"
+        ],
+        [
+            "6489cf5882cf2e4f86f03ae5",
+            "The Cascade of CSS Question D"
+        ],
+        [
+            "6489cf6282cf2e4f86f03ae6",
+            "The Cascade of CSS Question E"
+        ],
+        [
+            "6489cf6782cf2e4f86f03ae7",
+            "The Cascade of CSS Question F"
+        ],
+        [
+            "6489cf7682cf2e4f86f03ae8",
+            "The Cascade of CSS Question G"
+        ],
+        [
+            "648acb0745e79f79650fa2ac",
+            "The Cascade of CSS Question H"
+        ]
+    ]
+}
@@ -0,0 +1,39 @@
+---
+id: 6489bcd7b7600c818dc297ea
+title: The Cascade of CSS Question A
+challengeType: 15
+dashedName: the-cascade-of-css-question-a
+---
+
+# --description--
+
+Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against your wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
+
+So if you end up with some unexpected behavior like this it’s either because of these default styles, not understanding how a property works, or not understanding this little thing called the cascade.
+
+The cascade is what determines which rules actually get applied to your HTML. There are different factors that the cascade uses to determine this. We will examine three of these factors, which will hopefully help you avoid those frustrating “I hate CSS” moments.
+
+# --question--
+## --text--
+
+Why might you encounter unexpected behavior in CSS?
+
+## --answers--
+
+Due to conflicting rules and unexpected results
+
+---
+
+Due to the browser's default styles
+
+---
+
+Due to a lack of understanding of CSS properties
+
+---
+
+All of the above
+
+## --video-solution--
+
+4
@@ -0,0 +1,42 @@
+---
+id: 6489c96782cf2e4f86f03ae2
+title: The Cascade of CSS Question B
+challengeType: 15
+dashedName: the-cascade-of-css-question-b
+---
+
+# --description--
+
+A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which you went over in a previous lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but you're focusing only on the ones you’ve gone over so far:
+
+1. ID selectors (most specific selector)
+2. Class selectors
+3. Type selectors
+
+Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. An ID selector will always beat any number of class selectors, a class selector will always beat any number of type selectors, and a type selector will always beat any number of anything less specific than it. When no declaration has a selector with a higher specificity, a larger amount of a single selector will beat a smaller amount of that same selector.
+
+# --question--
+
+## --text--
+
+Which of the following is the correct order of specificity for CSS selectors, from most specific to least specific?
+
+## --answers--
+
+Type selectors, class selectors, ID selectors
+
+---
+
+ID selectors, class selectors, type selectors
+
+---
+
+Class selectors, type selectors, ID selectors
+
+---
+
+ID selectors, type selectors, class selectors
+
+## --video-solution--
+
+2
@@ -0,0 +1,58 @@
+---
+id: 6489cb0b82cf2e4f86f03ae3
+title: The Cascade of CSS Question C
+challengeType: 15
+dashedName: the-cascade-of-css-question-c
+---
+
+# --description--
+
+Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+.subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, which color would the `<div class="list subsection"></div>` element be rendered as?
+
+## --answers--
+
+blue
+
+---
+
+red
+
+---
+
+purple
+
+---
+
+black
+
+## --video-solution--
+
+2
@@ -0,0 +1,58 @@
+---
+id: 6489cf5882cf2e4f86f03ae5
+title: The Cascade of CSS Question D
+challengeType: 15
+dashedName: the-cascade-of-css-question-d
+---
+
+# --description--
+
+Now, let’s change things a little bit:
+
+```html
+<!-- index.html -->
+
+<div class="main">
+  <div class="list" id="subsection"></div>
+</div>
+```
+
+```css
+/* rule 1 */
+#subsection {
+  color: blue;
+}
+
+/* rule 2 */
+.main .list {
+  color: red;
+}
+```
+
+In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class.
+
+# --question--
+
+## --text--
+
+Based on the modified HTML and CSS code, which color would the `<div class="list" id="subsection"></div>` element be rendered as?
+
+## --answers--
+
+orange
+
+---
+
+red
+
+---
+
+blue
+
+---
+
+cyan
+
+## --video-solution--
+
+3
@@ -0,0 +1,51 @@
+---
+id: 6489cf6282cf2e4f86f03ae6
+title: The Cascade of CSS Question E
+challengeType: 15
+dashedName: the-cascade-of-css-question-e
+---
+
+# --description--
+
+```css
+/* rule 1 */
+#subsection .list {
+  background-color: yellow;
+  color: blue;
+}
+
+/* rule 2 */
+#subsection .main .list {
+  color: red;
+}
+```
+
+In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!
+
+While the `color: red` declaration would take precedence, the `background-color: yellow` declaration would still be applied since there’s no conflicting declaration for it.
+
+# --question--
+
+## --text--
+
+Considering the updated CSS code, which of the following describes the rendering of the `<div class="list" id="subsection"></div>` element?
+
+## --answers--
+
+Text color: Red, Background color: Transparent
+
+---
+
+Text color: Red, Background color: Yellow
+
+---
+
+Text color: Blue, Background color: Transparent
+
+---
+
+Text color: Blue, Background color: Yellow
+
+## --video-solution--
+
+2
@@ -0,0 +1,64 @@
+---
+id: 6489cf6782cf2e4f86f03ae7
+title: The Cascade of CSS Question F
+challengeType: 15
+dashedName: the-cascade-of-css-question-f
+---
+
+# --description--
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+
+/* rule 2 */
+.class .second-class {
+  font-size: 24px;
+}
+```
+
+Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.
+
+```css
+/* rule 1 */
+.class.second-class {
+  font-size: 12px;
+}
+/* rule 2 */
+.class > .second-class {
+  font-size: 24px;
+}
+```
+
+This example shows the same thing. Even though rule 2 is using a child combinator (`>`), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.
+
+*Note:* Not everything adds to specificity
+When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity in and of themselves.
+
+# --question--
+
+## --text--
+
+Based on the given CSS code, which font size would be applied to elements with the class "class second-class"?
+
+## --answers--
+
+12px
+
+---
+
+36px
+
+---
+
+24px
+
+---
+
+48px
+
+## --video-solution--
+
+3
@@ -0,0 +1,60 @@
+---
+id: 6489cf7682cf2e4f86f03ae8
+title: The Cascade of CSS Question G
+challengeType: 15
+dashedName: the-cascade-of-css-question-g
+---
+
+# --description--
+
+Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography based properties (`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties aren’t.
+
+The exception to this is when directly targeting an element, as this always beats inheritance:
+
+```html
+<!-- index.html -->
+
+<div id="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+/* styles.css */
+
+#parent {
+  color: red;
+}
+
+.child {
+  color: blue;
+}
+```
+
+Despite the `parent` element having a higher specificity with an ID, the `child` element would have the `color: blue` style applied since that declaration directly targets it, while `color: red` from the parent is only inherited.
+
+# --question--
+
+## --text--
+
+Based on the given HTML and CSS code, what would be the color of the `<div class="child"></div>` element?
+
+## --answers--
+
+Red
+
+---
+
+Blue
+
+---
+
+Inherited from the parent element
+
+---
+
+Transparent
+
+## --video-solution--
+
+2
@@ -0,0 +1,51 @@
+---
+id: 648acb0745e79f79650fa2ac
+title: The Cascade of CSS Question H
+challengeType: 15
+dashedName: the-cascade-of-css-question-h
+---
+
+# --description--
+
+The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?
+
+Really simply, actually. Whichever rule was the last defined is the winner.
+
+```css
+/* styles.css */
+
+.alert {
+  color: red;
+}
+
+.warning {
+  color: yellow;
+}
+```
+
+For an element that has both the `alert` and `warning` classes, the cascade would run through every other factor, including inheritance (none here) and specificity (neither rule is more specific than the other). Since the `.warning` rule was the last one defined, and no other factor was able to determine which rule to apply, it’s the one that gets applied to the element.
+
+# --question--
+## --text--
+
+What determines which CSS rule is applied when there are conflicting rules targeting the same element?
+
+## --answers--
+
+The specificity of the CSS rule.
+
+---
+
+The inheritance hierarchy of the element.
+
+---
+
+The presence of classes or IDs on the element.
+
+---
+
+The order in which the rules were defined.
+
+## --video-solution--
+
+4