Hey there!
I’ve learned the topic " Type, class, and ID selectors"(https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors).
It seems to me here some kind of mistake in the example to " Target an element if it has more than one class applied" (http://prntscr.com/s2tk10).
Here’s context:" In the example below we have a <div>
that contains a note. The grey border is applied when the box has a class of notebox
. If it also has a class of warning
or danger
, we change the ‘border-color’ "
And here’s example’s code(http://prntscr.com/s2tucf) which hasn’t class of notebox
or warning
or danger
.
The same problem is for exemple to “ID selectors”.
May you please fix it?
are you using a computer or smart device? your sample picture with the code is not matched to the proper context. the example with the classes, “warning and danger” in the class selectors should show 3 boxes with different colors above the code.
Hi @zenya!
The example you are referring to is this one, right: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Target_an_element_if_it_has_more_than_one_class_applied
?
I think it could be better. At the moment, the warning
and danger
styles apply whether you have the notebox
class included or not, which sort of defeats the point of the example. I think I am going to update it so that the notebox
class handles the border width and style, and the padding, whereas the warning
and danger
class only made the text bold and change the color:
.notebox {
border: 4px solid #666;
padding: .5em;
}
.notebox.warning {
border-color: orange;
font-weight: bold;
}
.notebox.danger {
border-color: red;
font-weight: bold;
}
Then I can also demonstrate that if you only apply a danger
class, say, you won’t get the styling applied at all — it needs the notebox
class as well.
<div class="notebox">
This is an informational note.
</div>
<div class="notebox warning">
This note shows a warning.
</div>
<div class="notebox danger">
This note shows danger!
</div>
<div class="danger">
This won't get styled — it also needs to have the notebox class
</div>
Yes, it’s better to understend what is it.
Thank you for help.