2

I'm using a CMS(Joomla), and they allow me to put a class for a tag and then I can modify the css for just that particular page.

I'm trying to use MDN to find the answer but I couldn't exactly get it to work the way I wanted.

Here is the JSFiddle they had on their page, I was messing around with it: https://jsfiddle.net/amvz5dkb/13/

<div class="divclass">
  <span class="spanclass">Span #1, in the div.
    <span="betterspanclass">Span #2, in the span that's in the div.</span>
        <span="betterspanclass">Span #3, in the span 1.</span>
  </span>
</div>
<span>Span #4, not in the div at all.</span>

And here is my CSS

.divclass >  .betterspanclass {
  background-color: red;
}

This doesn't work, only 

.divclass > span {
  background-color: red;
}

Seems to have an effect but it doesn't affect span 3 at all, only span 1 and span 2. I want to make the background red for every betterspanclass inside divclass. Is this possible?

arsarc
  • 443
  • 1
  • 9
  • 22
  • Something lithe this ? https://jsfiddle.net/amvz5dkb/14/ – executable Aug 28 '18 at 14:44
  • 1
    It's because you are using the *direct descendant* selector `>` - Remove that. – Paulie_D Aug 28 '18 at 14:45
  • https://stackoverflow.com/questions/4459821/css-selector-what-is-it The `>` selects the immediate children of the parent class ... so your code will only select the first child of `.divclass` -- if you want to select all of the specific classes, drop the `>` and go with something like `.divclass .betterspanclass` -- this will effect all the `.betterspanclass`es inside any `.divclass` – Doug Aug 28 '18 at 14:45

0 Answers0