Change color of H1 only inside certain classes

Question

I have the following problem. I would like the h1,h2,h3... colors to be different if they are inside certain classes. That works fine, but for the code above or below the div or table with that class, the color of the heading doesn't always revert back to the original one. How can I achieve this? Here is my code:

CSS:

.white_rectangle,.extras h1,h2,h3,h4,h5,h6{
    color: navy;
}

I want this to be the color if I have h1, h2, etc. inside these classes - white_rectangle and extras. For all other instances I have the following:

h1, h2, h3, h4, h5, h6 { color: red; font-weight: normal }

HTML:

<h1>Before</h1>
<h3>Before</h3>

<table class='extras'>
    <tr><td><h1>Text Inside Class</h1></td></tr>
</table>

<h1>After</h1>
<h2>After</h2>

Fiddle: http://jsfiddle.net/y5hg8ke5/

I want the text "Before" and "After" to be red, but it doesn't seem to work properly.

score 4 · Accepted Answer · edited Oct 09 '14 at 08:47

4

.white_rectangle,
.extras h1,
.extras h2,
.extras h3,
.extras h4,
.extras h5,
.extras h6 {
    color: navy;
}

edited Oct 09 '14 at 08:47

Hashem Qolami

97,268
26
150
164

answered Oct 09 '14 at 08:46

To those who are curious about how to combine these selectors: http://stackoverflow.com/questions/25285518/how-to-target-a-group-of-long-similar-css-selectors-on-one-line/25286385#25286385 However I do NOT recommend that in this case. – Hashem Qolami Oct 09 '14 at 08:50
you are right @Hashem Qolami, but i think TheBlueAssasin is a beginner and no need to confuse him – Oct 09 '14 at 08:53
Thanks! You're right @Touregsys :) But I'll check the other suggestion as well to learn it. – TheBlueAssasin Oct 09 '14 at 09:17

score 1 · Answer 2 · 2014-10-09T09:02:29.063

1

Use the :any pseudo-class.

.white_rectangle, .extras :any(h1, h2, h3, h4, h5, h6) {
    color: navy;
}

However, in practice you will need to use vendor-prefixed versions -moz-any and -webkit-any, so it may not save you that much typing. Do not combine these in one rule, as in

.white_rectangle, .extras :-moz-any(h1, h2...), .extras :-webkit-any(h1, h2...)

because other browsers will invalidate the entire rule due to the unrecognized vendor-prefixed pseudo-class. Instead, specify them separately:

.white_rectangle { color: navy: }
.extras :-webkit-any(h1, h2, h3, h4, h5, h6) { color: navy; }
.extras :   -moz-any(h1, h2, h3, h4, h5, h6) { color: navy; }

You are out of luck on IE and Opera. See https://developer.mozilla.org/en/docs/Web/CSS/:any. Note from that page (thanks @HashemQolami):

Note : This pseudo-class is in progress to be standardized in CSS Selectors Level 4 under the name :matches(). It is likely that the syntax and name of :-vendor-any() will be changed to reflect it in the near future.

edited Oct 09 '14 at 09:02

answered Oct 09 '14 at 08:54

1

-1 There's no `:any()` pseudo class in CSS specs, The proposed name is `:matches()` which is a part of CSS selectors level 4 and it's not implemented in any of web browsers at the moment. – Hashem Qolami Oct 09 '14 at 08:59
@HashemQolami seems exists. This user provided MDN link which I did quick read and also created a [fiddle](http://jsfiddle.net/y5hg8ke5/4/) which is working fine. (UPDATED: Understood, it is changing to matches.) – Mr_Green Oct 09 '14 at 09:05
I withdraw my downvote respectfully, however consider altering `.extras :any` since there was no such `:any()` thing in the spec (which is still at Working Draft state) even in the oldest version: http://www.w3.org/TR/2011/WD-selectors4-20110929/#matches – Hashem Qolami Oct 09 '14 at 09:25
@HashemQolami You're basically right, this is a curiosity and should not be used in real life. FWIW, it seems that Google does use this internally in some of its default CSS fules. – Oct 09 '14 at 09:31

score 0 · Answer 3 · answered Oct 09 '14 at 08:47

0

You need to include the main "h1,h2..." to each selector (.extras).

So:

.white_rectangle,.extras h1,.extras h2,.extras h3,.extras h4,.extras h5,.extras h6 { 
   color: navy; 
}

answered Oct 09 '14 at 08:47

derdida

14,784
16
90
139

score 0 · Answer 4 · answered Oct 09 '14 at 08:48

See this fiddle

I've changed the CSS as follows CSS

h1,h2,h3,h4,h5,h6 { color: red; font-weight: normal }

.white_rectangle,.extras h1,.extras h2,.extras h3,.extras h4,.extras h5{
    color: navy;
}

here i've selected only headings(h1,h2,h3,h4,h5,h6) inside .extras.

score 0 · Answer 5 · answered Oct 09 '14 at 08:49

0

This is because you are setting all headings to color: navy, even if theyr're not within .extras.

That'd be the correct way:

.extras h1, .extras h2, .extras h3,.extras h4, .extras h5, .extras h6 {
    color: navy; 
}

answered Oct 09 '14 at 08:49

Carles Jove i Buxeda

681
6
19

Change color of H1 only inside certain classes

5 Answers5

See this fiddle