[SOLVED] [Updated Code] How do I set padding only for items 1 through 6? And have padding for items 7 through 9 be different?

Updated Code: https://jsfiddle.net/jp239wgq/15/

<div class="container">
  <div class="item1">
    <h3>Radio 1</h3>
    <span class="item-line"></span>
  </div>
  <div class="item1">
    <h3>Radio 2</h3>
    <span class="item-line"></span>
  </div>
  <div class="item1">
    <h3>Radio 3</h3>
    <span class="item-line"></span>
  </div>
  <div class="item1">
    <h3>Radio 4</h3>
    <span class="item-line"></span>
  </div>
  <div class="item1">
    <h3>Radio 5</h3>
    <span class="item-line"></span>
  </div>
  <div class="item1">
    <h3>Radio 6</h3>
    <span class="item-line"></span>
  </div>
  <div class="item2">
    <h3>Radio 7</h3>
    <span class="item-line"></span>
  </div>
  <div class="item2">
    <h3>Radio 8</h3>
    <span class="item-line"></span>
  </div>
  <div class="item2">
    <h3>Radio 9</h3>
    <span class="item-line"></span>
  </div>
</div>

  * {
  box-sizing: border-box;
}

.container {
  width: 1204px;
  Height: 368px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.item1 {
    color: #0059dd;
    line-height:1;
    font-size:30px;
    font-weight:bold;
    padding-top: 0px; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    padding-left: 50px;
}

.item2 {
   color: #0059dd;
   line-height:1;
   font-size:30px;
   font-weight:bold;
   padding-top: 0px; 
   padding-right: 50px; 
   padding-bottom: 0px; 
   padding-left: 50px;
}

.item h3 {
  color: #0059dd;
  line-height: 1;
  font-size: 30px;
  font-weight: bold;
}

.item-line {
  display: block;
  width: 300px;
  height: 24px;
  background-color: #E2AB58;
}

.item1 h3 {
    font-weight: bold;
}

.item2 h3 {
    font-weight: bold;
}

You can give a div more than one class. For example, <div class = "item item-styleA"> for items 1 to 5 and <div class = "item item-styleB"> for items 6 to 9.

Then in your CSS use the class “item” for styles coomon to all items, but for padding, have something like this:

.item-styleA {
    padding: 5px;
}
.item-styleB {
   padding: 8px;
}

Of course the padding I used is just an example.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.