Apply CSS rule to multiple elements within a sub-class - css

Question

I have the following markup:
<div class="class-XXX">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
For simplicity, lets assume that class-XXX can only have the values class-1, class-2, class-3 and class-4.
I want to apply the rule color: #fff; to every child of class-5 that is not a child of class-1. Here that part of my stylesheet:
.class-2 .class-5,
.class-3 .class-5,
.class-4 .class-5 {
color: #fff;
}
This is not working and I'm not really sure why. I don't believe that the rule is being overridden either.
UPDATE
As AndrewBone pointed out, the rule appears to work in a minimal example. I now understand what is wrong, but I don't know how to fix it:
There is a rule being applied to h1 in another CSS file (can't be removed) and that rule is being given higher priority than the rule I was writing. How can I fix this?
Here is an example JSFiddle.
SOLUTION
Vucko pointed out that the h1 type selector has higher priority and so the rule will not be applied. So, in order to avoid listing all possible combinations one should use the * selector!
End result:
.class-2 .class-5 *,
.class-3 .class-5 *,
.class-4 .class-5 *{
color: #fff;
}
My thanks to Paulie_D and David Wilkinson for teaching me about the :not pseudo-selector.

Answer 1

This would do it..
[class^="class-"]:not(.class-1) .class-5 {
*/ your styles here */
}
...but this only works for a specific methodolody in classnames as above.
[class^="class-"]:not(.class-1) .class-5 {
color: red;
}
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-5">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>

Answer 2

If you have some container for those divs, you can then use the :not selector (as Harry mentioned in the comment):
.main :not(.class-1) .class-5 {
color: red;
}
<div class="main">
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>1</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>2</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>3</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>4</h1>
</div>
</div>
<div class="class-5">
<div class="class-5">
<!-- could be any text element -->
<h1>5</h1>
</div>
</div>
</div>
.main :not(.class-1) .class-5 {
color: red;
}
JSFiddle

Answer 3

This does the trick: https://jsfiddle.net/023rox1k/
CSS:
.wrapper :not(.class-1) .class-5 {
color: blue;
}
HTML:
<div class="wrapper">
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
</div>
The :not selector is quite powerful and obviously targets elements not of a certain class in this case.