CODEWITHSUNDEEP
csscss-selectors
Fuego DeBassi
Fuego DeBassi

Reputation: 3017

CSS inheriting oddities

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?!

Upvotes: 0

Views: 54

Answers (3)

Sarfraz
Sarfraz

Reputation: 382656

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

Specifics On CSS Specificity

Upvotes: 0

Jason
Jason

Reputation: 1104

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>

Upvotes: 2

SLaks
SLaks

Reputation: 887285

No, it won't.

Upvotes: 1

Related Questions