Intro to HTML & CSS lesson | The cascade course: Rephrase sentence #26526

odilson-dev · 2023-10-19T17:27:40Z

Because

", and a type selector will always beat any number of anything less specific than it."

I think this is super confusing for students to understand. I rephrased it as: ", and a type selector will always beat any number of less specific selectors."

This PR

Rephrase the sentence to: ", and a type selector will always beat any number of less specific selectors."

Issue

Closes #26523

Additional Information

Pull Request Requirements

I have thoroughly read and understand The Odin Project Contributing Guide
The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
The Because section summarizes the reason for this PR
The This PR section has a bullet point list describing the changes in this PR
If this PR addresses an open issue, it is linked in the Issue section
If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
If any lesson files are included in this PR, they follow the Layout Style Guide

This reverts commit 324411b.

KevinMulhern · 2023-10-20T12:51:02Z

foundations/html_css/css-foundations/the-cascade.md

@@ -26,7 +26,7 @@ A CSS declaration that is more specific will take precedence over less specific
 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, <span id="high-specificity-class-type">a class selector will always beat any number of type selectors</span>, 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.
+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, <span id="high-specificity-class-type">a class selector will always beat any number of type selectors</span>, and a type selector will always beat any number of less specific selector. 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.


Nit: Typo

Suggested change

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 less specific selector. 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.

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 less specific selector. 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 selectors.

KevinMulhern · 2023-10-20T15:45:26Z

foundations/html_css/css-foundations/the-cascade.md

@@ -26,7 +26,7 @@ A CSS declaration that is more specific will take precedence over less specific
 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, <span id="high-specificity-class-type">a class selector will always beat any number of type selectors</span>, 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.
+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, <span id="high-specificity-class-type">a class selector will always beat any number of type selectors</span>, and a type selector will always beat any number of less specific selector. 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 selectors.


Apologies @odilsonjs, my last suggestion was the wrong instance of "selector"

Suggested change

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 less specific selector. 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 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 less specific selectors. 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.

Okay, i'll make a last small modifcation

Done, i think it's okay now

KevinMulhern · 2023-10-21T10:03:31Z

foundations/html_css/css-foundations/the-cascade.md

@@ -26,7 +26,7 @@ A CSS declaration that is more specific will take precedence over less specific
 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, <span id="high-specificity-class-type">a class selector will always beat any number of type selectors</span>, 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.
+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, <span id="high-specificity-class-type">a class selector will always beat any number of type selectors</span>, and a type selector will always beat any number of less specific selectors. When no declaration has a selector with a higher specificity, a greater specificity of a single selector takes precedence over a lesser specificity of the same selector.


Can you explain to me what exactly this means with an example please @odilsonjs

"When no declaration has a selector with a higher specificity, a greater specificity of a single selector takes precedence over a lesser specificity of the same selector."

Certainly! Let's illustrate this concept with a simple example in CSS:

Suppose you have the following CSS rules:
`/* Rule 1 */
p {
color: red;
}

/* Rule 2 */
#special-paragraph {
color: blue;
}`

Now, you have an HTML document like this:

This is a special paragraph.
In this example:

1 - The selector p in "Rule 1" has a lesser specificity because it's a type selector.
2 - The selector #special-paragraph in "Rule 2" has a greater specificity because it's an ID selector.

Since both selectors target the same
element, specificity becomes crucial in determining which style takes precedence. In this case:

The "greater specificity" (ID selector) from "Rule 2" takes precedence over the "lesser specificity" (type selector) from "Rule 1."

As a result, the text in the paragraph will be displayed in blue, following the style defined by the ID selector in "Rule 2."

This example demonstrates how the specificity of selectors determines which styles are applied when there are conflicting CSS rules.

Thanks @odilsonjs, the first part of this paragraph is indeed about the rules you've just explained. However, the part you've changed is not. It's about when you are using the same kind of selectors.

For reference, the original text:

"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."

For example, when you are using class selectors, the declaration that uses more class selectors beats any that have less:

.list .item { ... }

has a higher specificity than

.item { ... }

The example that comes after this paragraph in the lesson demonstrates it.

I don't disagree the original line is confusing and wordy. But I'd argue the replacement text being proposed here is even more confusing.

Hmmm... okay @KevinMulhern, Thank you for your clarification

After some reflection, i finally get your point of view.

No changes is required about it

Let's keep this as it is.

That sounds good to me too @odilsonjs - I can't think of a better alternative right now. Lets get this sentence reverted to the older version and then we'll merge

Okay, it's done!

Hello @KevinMulhern, this PR is still open, do you need some more changes before Merge?

This reverts commit f5cf57c.

KevinMulhern

Great stuff, thanks @odilsonjs

odilson-dev added 3 commits October 19, 2023 12:17

Rephrase sentence for better understanding

324411b

Revert "Rephrase sentence for better understanding"

ecf66a0

This reverts commit 324411b.

Rephrase sentence for better understanding (TheOdinProject#26523)

89ffa09

github-actions bot added the Content: Foundations Involves the Foundations content label Oct 19, 2023

KevinMulhern requested changes Oct 20, 2023

View reviewed changes

Fix typo in selectors word

bb6d35f

KevinMulhern reviewed Oct 20, 2023

View reviewed changes

odilson-dev added 2 commits October 20, 2023 12:06

Fix typo in selectors

584ee80

Rephrase for better understanding

f5cf57c

KevinMulhern requested changes Oct 21, 2023

View reviewed changes

Revert "Rephrase for better understanding"

01b6531

This reverts commit f5cf57c.

KevinMulhern approved these changes Oct 24, 2023

View reviewed changes

KevinMulhern merged commit f74aad3 into TheOdinProject:main Oct 24, 2023
1 check passed

odilson-dev deleted the newbranch branch October 24, 2023 19:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Intro to HTML & CSS lesson | The cascade course: Rephrase sentence #26526

Intro to HTML & CSS lesson | The cascade course: Rephrase sentence #26526

odilson-dev commented Oct 19, 2023 •

edited

Loading

KevinMulhern Oct 20, 2023

odilson-dev Oct 20, 2023

KevinMulhern Oct 20, 2023 •

edited

Loading

odilson-dev Oct 20, 2023

odilson-dev Oct 20, 2023

KevinMulhern Oct 21, 2023 •

edited

Loading

odilson-dev Oct 21, 2023 •

edited

Loading

KevinMulhern Oct 21, 2023

odilson-dev Oct 21, 2023

KevinMulhern Oct 21, 2023

odilson-dev Oct 21, 2023

odilson-dev Oct 24, 2023

KevinMulhern left a comment

Intro to HTML & CSS lesson | The cascade course: Rephrase sentence #26526

Intro to HTML & CSS lesson | The cascade course: Rephrase sentence #26526

Conversation

odilson-dev commented Oct 19, 2023 • edited Loading

Because

This PR

Issue

Additional Information

Pull Request Requirements

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KevinMulhern Oct 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KevinMulhern Oct 21, 2023 • edited Loading

Choose a reason for hiding this comment

odilson-dev Oct 21, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KevinMulhern left a comment

Choose a reason for hiding this comment

odilson-dev commented Oct 19, 2023 •

edited

Loading

KevinMulhern Oct 20, 2023 •

edited

Loading

KevinMulhern Oct 21, 2023 •

edited

Loading

odilson-dev Oct 21, 2023 •

edited

Loading