92 lines
1.9 KiB
CSS
92 lines
1.9 KiB
CSS
.para,
|
|
.small-para {
|
|
color: hsl(0, 100%, 50%);
|
|
}
|
|
|
|
.para {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.button {
|
|
background-color: rgb(255, 255, 255);
|
|
color: rgb(0, 0, 0);
|
|
font-size: 20px;
|
|
}
|
|
|
|
div.text {
|
|
color: green;
|
|
font-size: 22px;
|
|
}
|
|
|
|
/* SOLUTION */
|
|
|
|
/*
|
|
For the following rule, we removed it from its original position in the file:
|
|
|
|
.small-para {
|
|
font-size: 14px;
|
|
}
|
|
|
|
Then we placed it after the .para selector, taking advantage of the rule order since both selectors have the same specificity.
|
|
|
|
Another solution would be keeping it in its original place and just chaining selectors, giving this rule a higher specificity:
|
|
|
|
p.small-para {
|
|
font-size: 14px;
|
|
}
|
|
*/
|
|
|
|
.small-para {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/*
|
|
For the following rule we removed the original .confirm selector:
|
|
|
|
.confirm {
|
|
background: green;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
Then we used an ID selector instead, since it has a higher specificity than the .button selector.
|
|
|
|
Other solutions would be to simply move the .confirm rule below the .button rule, or to use the .button.confirm selector without moving it:
|
|
|
|
.button.confirm {
|
|
background: green;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
*/
|
|
|
|
#confirm-button {
|
|
background: green;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*
|
|
For the following rule we first removed it from its original position in the file:
|
|
|
|
.child {
|
|
color: red;
|
|
font-size: 14px;
|
|
}
|
|
|
|
Then we added another selector to create a descendant combinator. If we only created a descendant combinator, the specificity would be tied with the
|
|
div.text selector and it would come down to rule order, and if we only moved it the div.text selector would still have a higher specificity.
|
|
|
|
Another solution would be to keep the rule where it was and just replace the div selector with the .text selector:
|
|
|
|
.text .child {
|
|
color: red;
|
|
font-size: 14px;
|
|
}
|
|
*/
|
|
|
|
div .child {
|
|
color: red;
|
|
font-size: 14px;
|
|
}
|