CODEWITHSUNDEEP
htmlcss
TheBlueAssasin
TheBlueAssasin

Reputation: 93

Change color of H1 only inside certain classes

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.

Upvotes: 2

Views: 7969

Answers (5)

user663031
user663031

Reputation:

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.

Upvotes: 1

Carles Jove i Buxeda
Carles Jove i Buxeda

Reputation: 701

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; 
}

Upvotes: 0

Lal
Lal

Reputation: 14810

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.

Upvotes: 0

user2846400
user2846400

Reputation: 

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

Upvotes: 4

derdida
derdida

Reputation: 14904

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; 
}

Upvotes: 0

Related Questions