CODEWITHSUNDEEP
cssinheritance
Systembolaget
Systembolaget

Reputation: 2514

Styling h1 tags nested in a div two levels deep - inheritance misunderstanding?

Why are my h1 tags not styled, although they are simple descendant tags? Could you tell me, what I'm misunderstanding about inheritance in this case? The code is here.

HTML

<div id="title">
  <div class="left"
      <h1>Lala</h1>
  </div>
  <div class="right"
      <h2>Lulu</h2>
  </div>
</div>

CSS:

body {
    font-family: Arial, sans-serif;
    letter-spacing: 0.025em;
}

#title {
    position: absolute;
    left: 64px;
    white-space: nowrap;
    height: 60px;
    background: #000;
}

#title > .left {
    float: left;
    height: inherit;
    width: 380px;
    background: #C2D;
}

#title > .right {
    float: left;
    height: inherit;
    width: 124px;
    margin-left: 4px;
    background: #5CC;
}

h1 {
    color: #FF4;
}

Upvotes: 0

Views: 518

Answers (2)

ghilton
ghilton

Reputation: 127

In line 2 your code should read

  <div class="left">

Note the ">" at the end to close the div

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hey now check to this

you forget to disclose div

Replace

this 

<div id="title">
  <div class="left"
      <h1>Lala</h1>
  </div>
  <div class="right"
      <h2>Lulu</h2>
  </div>
</div>

into this 

<div id="title">
  <div class="left">
      <h1>Lala</h1>
  </div>
  <div class="right">
      <h2>Lulu</h2>
  </div>
</div>

">" at the end to close the div

Live demo

http://jsfiddle.net/SPN6M/2/

Upvotes: 4

Related Questions