CODEWITHSUNDEEP
htmlcss
GibboK
GibboK

Reputation: 73938

Css set a property for h2 to h6 for a specific class

I have a div, inside different <h> tags.

I would like to apply some formatting to ALL <h> tags inside specifically to any with class cnt ONLY.

At the moment I'm using the following CSS without success... Any ideas what I'm doing wrong and how to fix it?

<div class="cnt">
    <h1>Some Text.</h1>
    <h2>Some Text.</h2>
    <h3>Some Text.</h3>
    <h4>Some Text.</h4>
    <h5>Some Text.</h5>
    <h6>Some Text.</h6>
</div>


    h2 h3 h4 h5 h6 .cnt 
    {
        font-size:16px;
        font-weight:700;
    }

Upvotes: 5

Views: 24496

Answers (4)

Barry Kaye
Barry Kaye

Reputation: 7759

Try this:

div.cnt h1, div.cnt h2, div.cnt h3, div.cnt h4, div.cnt h5, div.cnt h6 
{
    /* ... */
}

Upvotes: 0

Ash Clarke
Ash Clarke

Reputation: 4887

captainclam has the right answer, but just so you understand a little about why it didn't work, the following selector:

h2 h3 h4 h5 h6 .cnt

would represent something like the following:

<h2><h3><h4><h5><h6><div class="cnt"></div></h6></h5></h4></h3></h2>

(anything with class cnt could be put in h6 for it to apply)

@Ross, it had nothing to do with specificity; The selector was wrong.

Upvotes: 2

Ross
Ross

Reputation: 17977

.cnt h2, .cnt h3, .cnt h4, .cnt h5, .cnt h6 {
    font-size:16px;
    font-weight:700;
}

read up on css specificity

Upvotes: 12

Simon Lang
Simon Lang

Reputation: 42725

.cnt h1, .cnt h2, .cnt h3, .cnt h4, .cnt h5, .cnt h6 {
  font-size:16px;
  font-weight:700;
}

Upvotes: 2

Related Questions