CSS inheriting oddities

Question

I run into this a lot and it's fairly annoying. Does anyone know about this:

#content h5 {
color:red;
}

#next h5 {
color:blue;
}

When the markup looks like this:

<div id="content>
  <h5>RED</h5>

  <div id="next">
    <h5>BLUE</h5>
  </div>
</div>

The blue h5 will actually appear red, what gives?!

There is a typo in your markup, id="content" needs a closing quote (assuming this is just a typo in the example). The concept is working okay for me in Chrome, Firefox and IE 8 at jsfiddle.net/AWVdY What browser are you using? — Nate Pinchot
– Nate Pinchot, Commented Jun 25, 2010 at 20:33

Jason · Accepted Answer · 2010-06-25 20:31:37Z

2

I had no problems with it. You do have a quote mark missing after content though. Below is what I tested with

<html>
<head>
<style>
#content h5 {
color:red;
}

#next h5 {
color:blue;
}
</style>
</head>
<body>
<div id="content">
  <h5>RED</h5>

  <div id="next">
    <h5>BLUE</h5>
  </div>
</div>
</body>
</html>

answered Jun 25, 2010 at 20:31

Jason

1,1041 gold badge10 silver badges25 bronze badges

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

Comments

SLaks · Accepted Answer · 2010-06-25 20:30:55Z

1

No, it won't.

answered Jun 25, 2010 at 20:30

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Sarfraz · Accepted Answer · 2010-06-25 20:44:38Z

0

That's because of what is known as CSS Specificity, here is a good tutorial about it:

Specifics On CSS Specificity

answered Jun 25, 2010 at 20:44

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Collectives™ on Stack Overflow

CSS inheriting oddities

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related