External css rule not working

[AEM542]

Hi everyone,

I’m trying remove the padding from the section element below:

<section class="content content-09">
</section>

I have the following css rule in an external style sheet:

.content-09 {
padding: 0;
}

The above doesn’t work but if I use an inline css rule it does.

Can you anyone tell me what I’m doing wrong with the external rule?

Thanks in advance.

[Gandalf]

Hi there. When you post your code you will need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.

[oli_d111]

Have you tried targeting it as:-

.content content-09:
     Padding: 0;

[PaulOB]

@oli_d111

Have you tried targeting it as:-

.content content-09:

I hope not as that rule would miss the target element unless there was a parent called .content also (apart from the fact that there are typos in your snippet that would stop it working anyway:)).

To target an element with multiple classes you use the dot separated notation and not a space which is a descendant selector (i.e. .content.content-09{padding:0}

However we are still guessing because we don’t know the specificity of the original rule.

Look at the page in devtools and see how the padding is applied and then match the specificity of that rule. Do not use !important as that would be a hack unless the original rule was also an !important rule.

It would be easier to give advice if we could see the page in question or at least the relevant css and html

[oli_d111]

My bad. Trying to entertain two kids and not giving this my full attention .

I missed out the dot on the .content-09 & the curly braces. . Thanks for spotting my error

[AEM542]

Thanks for the replies. I changed the selector to section.content-09 and it seemed to have worked. I don’t know why I had to be so specific with the selector as I thought my original rule would have done the trick.

[PaulOB]

@AEM542

I thought my original rule would have done the trick.

Without knowledge of the original rule it’s not possible to exactly say why your new rule didn’t work other than that the original rule was of higher specificity.

In CSS one rule will always win out depending on its origin, weight and/or where it lies in the stylesheet. You just need to match the previous rule using a rule of the same or greater specificity and make sure it follows after the original rule in the stylesheet.

[AEM542]

I matched the original rule in my second try so that’s probably why it worked. Thanks again for the advice.