Targeting itemprop in CSS

Question

Using the custom.css code below, I’m succesfully overridding the css files of a commercial Joomla 3 Template.

div[itemprop="articleBody"] h1, h2, h3, h4, h5, h6 {
     margin-top: 18px!important;
     margin-bottom: 0px!important;
}

The custom.css should apply to:

<div itemprop="articleBody">
   <h1><strong>Some Text</strong></h1>
   <p> Some Text Some Text Some Text Some Text </p>
</div>

The problem is that the custom.css code is applied even to h tags outside the <div itemprop="articleBody"> container in all major browsers.

What could be the problem ?

Answer 1

By Writing

div[itemprop="articleBody"] h1, h2, h3, h4, h5, h6 {
 margin-top: 18px!important;
 margin-bottom: 0px!important;
}

You set styles first to the h1 that is inside div with itemprop, but then you add styles to all h2,h3,h4,h5,h6 that are on the whole page.

So the problem is that you don't write CSS selectors properly. You need to add a parent selector for every heading, for example

div[itemprop="articleBody"] h1,
div[itemprop="articleBody"] h2,
div[itemprop="articleBody"] h3{
    /*styles*/
}

OR if you use a CSS preprocessor like SASS or LESS

div[itemprop="articleBody"] {
   h1 { }
   h2 { }
   h3 { }
   ...
 }