CODEWITHSUNDEEP
htmlcss
Tushar
Tushar

Reputation: 97

<div> Parent is not affecting <div> child?

I am working on a periodic table, and I came across a problem:

* {
  text-align: center;
}
p {
  font-size: 5px;
  margin-top: -40px;
}
div {
  height: 70px;
  width: 70px;
  line-height: 60px;
  font-family: Trebuchet MS;
  font-size: 30px;
}
.row1 {
  margin-left: 92px;
  background-color: #FFCC33;
}
#lithium {
  margin-top: 170px;
}
<div class="row1">
  <div id="lithium">Li
    <p>Lithium</p>
  </div>
  <div id="sodium">Na
    <p>Sodium</p>
  </div>
  <div id="potassium">K
    <p>Potassium</p>
  </div>
  <div id="rubidium">Rb
    <p>Rubidium</p>
  </div>
  <div id="cesium">Cs
    <p>Cesium</p>
  </div>
  <div id="francium">Fr
    <p>Francium</p>
  </div>
</div>

In this case i want to change all div elements that are child to class 'row1' to #FFCC33. It works well if i just put all div's names(i.e. #lithium, #sodium,...{background-color: SOMECOLOR;}, but when i put class name(i.e. row1), it just affects the first child(in this case, its lithium). I have tried changing id to class and vice-versa to no avail. Is this supposed to even work or am I doing everything wrong here?

Upvotes: 1

Views: 41

Answers (3)

jlocker
jlocker

Reputation: 1488

You have to remove height:70px in div 

* {
  text-align: center;
}
p {
  font-size: 5px;
  margin-top: -40px;
}
div {
  width: 70px;
  line-height: 60px;
  font-family: Trebuchet MS;
  font-size: 30px;
}
.row1 {
  margin-left: 92px;
  background-color: #FFCC33;
}
#lithium {
  margin-top: 170px;
}
<div class="row1">
  <div id="lithium">Li
    <p>Lithium</p>
  </div>
  <div id="sodium">Na
    <p>Sodium</p>
  </div>
  <div id="potassium">K
    <p>Potassium</p>
  </div>
  <div id="rubidium">Rb
    <p>Rubidium</p>
  </div>
  <div id="cesium">Cs
    <p>Cesium</p>
  </div>
  <div id="francium">Fr
    <p>Francium</p>
  </div>
</div>

Upvotes: 1

Josh Rutherford
Josh Rutherford

Reputation: 2723

If you're trying to make sure that all <div> children of .row1 have a background color of FFCC33, try a selector like this:

.row1 > div {
    background-color: #FFCC33;
}

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Try this 

.row1 > div {
  margin-left: 92px;
  background-color: #FFCC33;
}

Demo Here

Upvotes: 2

Related Questions