/* 0, 1, 0, 0, 0 */ ``` Comparing specificity scores is done by comparing each corresponding number from left to right. If one number is higher, then that declaration wins. If they are the same, proceed to comparing the next number. Repeat the process until the last number. ``` [A] [B] [C] [D] [E] .box.red span 0 0 0 2 1 ul#items li.selected:hover 0 0 1 2 2 <= wins, because of higher score in [C] ul#items li.selected:hover 0 0 1 2 2

0 1 0 0 0 <= wins, because of higher score in [B] ``` Note that the value of each number doesn't carry over into the other numbers. For example, if a selector has 13 class selectors, the specificity score remains will be `0, 0, 0, 13, 0`. This means that no matter how many class selectors you have, they'll never be able to beat a single ID selector. If all numbers are the same, then both declarations have the same specificity. In this case, the browser then considers the **cascade**. # Cascade The cascade is hopefully easier to understand, it's the order of when the different CSS rules and declarations appear in our stylesheets, as well as the order of the stylesheets themselves. These are the different sources for the styles that gets applied on the page, as well as their order in the cascade: ``` 1. User-agent styles (default styles provided by the browser) 2. User styles (custom styles set by the user in their browser) 3. Author styles (the styles that the author of the website has loaded into the page) ``` When two declarations have the same specificity scores, the browser then considers which one of them appears later in the cascade. The declaration that was loaded later in the cascade (i.e. defined later in the CSS file, or in a CSS file that was loaded after the others) will take precedence over the other one. Now that we understand how CSS specificity and cascade works, can you tell me what the color of the box is going to be? Leave your answers in the comments! ```

div#box { background-color: green !important; } div.box { background-color: red !important; } ```" data-react-helmet="true" /> /* 0, 1, 0, 0, 0 */ ``` Comparing specificity scores is done by comparing each corresponding number from left to right. If one number is higher, then that declaration wins. If they are the same, proceed to comparing the next number. Repeat the process until the last number. ``` [A] [B] [C] [D] [E] .box.red span 0 0 0 2 1 ul#items li.selected:hover 0 0 1 2 2 <= wins, because of higher score in [C] ul#items li.selected:hover 0 0 1 2 2

0 1 0 0 0 <= wins, because of higher score in [B] ``` Note that the value of each number doesn't carry over into the other numbers. For example, if a selector has 13 class selectors, the specificity score remains will be `0, 0, 0, 13, 0`. This means that no matter how many class selectors you have, they'll never be able to beat a single ID selector. If all numbers are the same, then both declarations have the same specificity. In this case, the browser then considers the **cascade**. # Cascade The cascade is hopefully easier to understand, it's the order of when the different CSS rules and declarations appear in our stylesheets, as well as the order of the stylesheets themselves. These are the different sources for the styles that gets applied on the page, as well as their order in the cascade: ``` 1. User-agent styles (default styles provided by the browser) 2. User styles (custom styles set by the user in their browser) 3. Author styles (the styles that the author of the website has loaded into the page) ``` When two declarations have the same specificity scores, the browser then considers which one of them appears later in the cascade. The declaration that was loaded later in the cascade (i.e. defined later in the CSS file, or in a CSS file that was loaded after the others) will take precedence over the other one. Now that we understand how CSS specificity and cascade works, can you tell me what the color of the box is going to be? Leave your answers in the comments! ```

div#box { background-color: green !important; } div.box { background-color: red !important; } ```" data-react-helmet="true" /> /* 0, 1, 0, 0, 0 */ ``` Comparing specificity scores is done by comparing each corresponding number from left to right. If one number is higher, then that declaration wins. If they are the same, proceed to comparing the next number. Repeat the process until the last number. ``` [A] [B] [C] [D] [E] .box.red span 0 0 0 2 1 ul#items li.selected:hover 0 0 1 2 2 <= wins, because of higher score in [C] ul#items li.selected:hover 0 0 1 2 2

0 1 0 0 0 <= wins, because of higher score in [B] ``` Note that the value of each number doesn't carry over into the other numbers. For example, if a selector has 13 class selectors, the specificity score remains will be `0, 0, 0, 13, 0`. This means that no matter how many class selectors you have, they'll never be able to beat a single ID selector. If all numbers are the same, then both declarations have the same specificity. In this case, the browser then considers the **cascade**. # Cascade The cascade is hopefully easier to understand, it's the order of when the different CSS rules and declarations appear in our stylesheets, as well as the order of the stylesheets themselves. These are the different sources for the styles that gets applied on the page, as well as their order in the cascade: ``` 1. User-agent styles (default styles provided by the browser) 2. User styles (custom styles set by the user in their browser) 3. Author styles (the styles that the author of the website has loaded into the page) ``` When two declarations have the same specificity scores, the browser then considers which one of them appears later in the cascade. The declaration that was loaded later in the cascade (i.e. defined later in the CSS file, or in a CSS file that was loaded after the others) will take precedence over the other one. Now that we understand how CSS specificity and cascade works, can you tell me what the color of the box is going to be? Leave your answers in the comments! ```

div#box { background-color: green !important; } div.box { background-color: red !important; } ```" data-react-helmet="true" />omniquotient