This exercise talks about making our CSS more flexible. What does this mean and how can we accomplish this?



This exercise talks about making our CSS more flexible. What does this mean and how can we accomplish this?


Within this context, flexible style sheets are ones that are relatively easy to maintain and can be modified without unexpectedly breaking other parts of your code. Aside from avoiding the important! keyword in most situations, another big step we can take towards keeping our style sheets flexible is to keep our selector specificity as low as possible. This helps developers to avoid tricky “specificity wars” down the line and allows them to more readily override styles when necessary.

Check out the articles below in this thread for some strategies you can use to keep your specificity low.

FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Important

Hi where is the article link specified in the answer? I am unable to see it.


I’m also not seeing the link, and I’ve noticed this same issue in other discussions that are linked to from the lessons. I’m using Chrome; is this potentially a browser issue?


I see the same issue in Safari, so I think it’s just that the text hasn’t been edited to include the link in these instances. I think I’ll flag the article and note that it’s missing the link, and do that in the future as well.


Please do flag others like this! This (topics the Discuss and Guide sections in the forums linked directly to the learning environment exercise-by-exercise) is a community-built wiki feature in beta. We have some content to seed things, but we really rely on contributions from learners like you to not only build the wiki but maintain it. If you don’t see a link suggested, for example, we’d love to hear suggestions from the community!

In terms of hacks or tricks on keeping specificity low, I’ve seen this one do the rounds

In terms of articles giving some more depth and context, I found this one most helpful myself:

The latter is a big guide, I’m not sure you’d need to read it all (and definitely not at this stage of the course), but the section on specificity is informative without being verbose, and gets a little more into the theory and the “why” of it all.


Thanks! Yeah, it’s probably over my head for now, but I’ll go back and read through that when I know a little bit more of what I’m doing. :stuck_out_tongue:


Hey @themorningline, please flag such FAQs when you see them!


Hi there, I have a question regarding !important and multiple selector. Under the style sheet, I have h5 {
color: rebeccapurple !important;
} AND .description h5 {
color: teal;
}. In this instance, I know that the rule with ! important overrides the latter .description h5 rule. My question is, what’s the different between adding a comma between the selectors as follow: .description , h5 versus omitting the comma?

Because when I added the comma (due to having multiple selectors), the .description, h5 rule overrides !important. Where the text is now teal instead of purple. Is this supposed to happen?



When you separate the

.description h5{


.description, h5{

by using a comma, you end up creating



where they would have same set of values(?) or classifications

Since your ‘.description, h5’ rule overrode the !important
I assume that you placed the new “.description, h5” rule below the “h5” rule
in which h5 rule was overwritten within “.description, h5”

I found an example to answer your problem at

Course: [Learn CSS: Selectors and Visual Rules]
Exercise 16: Multiple Selectors


Comma separated selectors are referred to as a selector list, which as shown will apply the same rule to all the selectors in the list. They need have no relation to one another.

There is only one reason to ever use !important and that is if we need to override an inline style rule.

h5 { color: red; }
.description h5 { color: purple; }

All H5 elements will be red except those which are descendants of .description.

Note that the above, .description h5 is NOT a multiple selector (as would be a comma separated selector list) but a descendant selector. The H5 can be nested at any level in a container with a class="description" attribute.