Using one class with different HTML elements

Question

I am trying to simplify my CSS and can't get my head around why I can't apply styles to different element types with the same class.

For example, the below will only style all the .forum elements navy, but the other more specific styles are ignored. Is there a way around this?

EDIT http://jsfiddle.net/fWvxs/

HTML

<h1 class="forum">Forum Header</h1>

    <p class="forum">Forum Content</p>

    <small class="forum">Small deets</small>

CSS

.forum {
color: navy;
}

.forum h1 {
    text-decoration: underline;
}

.forum small {
    font-size: 2em;
}

Weird it should work. :/ jsfiddle?

Abandoned Account
– Abandoned Account

2014-05-10 13:10:06 +00:00
Commented May 10, 2014 at 13:10 — Abandoned Account
– Abandoned Account, Commented May 10, 2014 at 13:10
You can! stackoverflow.com/questions/6023419/…

JohanVdR
– JohanVdR

2014-05-10 13:12:05 +00:00
Commented May 10, 2014 at 13:12 — JohanVdR
– JohanVdR, Commented May 10, 2014 at 13:12

King King · Accepted Answer · 2014-05-10 13:10:37Z

3

Try this:

.forum {
  color: navy;
}

h1.forum {
  text-decoration: underline;
}

small.forum {
  font-size: 2em;
}

Note that you used the wrong selector, .forum h1 means selecting the h1 which is one descendant of the .forum while h1.forum means selecting the h1 element having class forum.

answered May 10, 2014 at 13:10

King King

63.5k16 gold badges118 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abandoned Account Over a year ago

First answer out of all the same, so +rep

Vinay Pratap Singh Bhadauria · Accepted Answer · 2014-05-10 13:11:19Z

1

it should be like this

h1.forum {
  text-decoration: underline;
}

.forum h1 { //this applies to a h1 inside the .forum class element
    text-decoration: underline;
}

answered May 10, 2014 at 13:11

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Comments

ashishmaurya · Accepted Answer · 2014-05-10 13:11:20Z

1

this should work

.forum {
color: navy;
}

h1.forum  {
    text-decoration: underline;
}

small.forum  {
    font-size: 2em;
}

answered May 10, 2014 at 13:11

ashishmaurya

1,19610 silver badges18 bronze badges

Comments

InventorX · Accepted Answer · 2014-05-10 13:12:54Z

0

You have problem in Css Style, Correct CSS is:

.forum {
color: navy;
}

h1.forum  {
    text-decoration: underline;
}

small.forum  {
    font-size: 2em;
}

answered May 10, 2014 at 13:12

InventorX

3782 silver badges7 bronze badges

Comments

JohanVdR · Accepted Answer · 2014-05-10 13:32:34Z

It depends also what you want to achieve. In case you want to have define a forum style. You better add the class for example to the div instead of each element individually. You would otherwise repeatedly adding the class forum to each element.

<div class="forum">
    <h1>Forum Header</h1>
    <p>Forum Content</p>
    <small>Small deets</small>
</div>

.forum {/* PUT HERE THE FORUM DEFAULT STYLES WHICH ARE COMMON LIKE IE. COLOR, FONT-SIZE */}
.forum h1 {/* PUT HERE H1 FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum p {/* PUT HERE P FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum small {/* PUT HERE SMALL FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}

On the other hand if you need to apply a forum style to an individual element like a p and not the other elements you add the class to the element directly.

  <div>
    <h1>Forum Header</h1>
    <p class="forum">Forum Content</p>
    <small>Small deets</small>
</div>

p.forum {}

Collectives™ on Stack Overflow

Using one class with different HTML elements

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related