CSS class styles affecting HTML elements outside of class definition

user_17331846 0
Viewed 80

Style properties defined under one class affects the properties of another element with a different class definition.

Specifically the styles for the th and td from the Movement table are overwriting the ones defined in the Characteristics table. Inspecting the styles within Chrome it clearly shows that the Movement styles are trumping the Characteristic settings.

A working example of the code is below. It can run at this link from w3chools.com.

I've tried numerous variations and have been unable to correct it. Checked here and other sites for solutions but to no avail.

I'd really like to know what I'm doing wrong. Thanks.

.grid-container-0 {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: auto auto 5px auto;
  width: 200mm;
  border: solid black thin;
  padding: 0px;
  background-color: white;
}

.grid-container-2 {
  display: grid;
  grid-gap: 1px;
  border: none;
  padding: 2px;
  background-color: white;
}

.grid-container-5 {
  display: grid;
  grid-gap: 1px;
  border: none;
  padding: 1px;
  background-color: white;
}

.title {
  padding: 2px;
  text-align: left;
  font-size: 12pt;
  font-weight: bold;
  color: white;
  background-color: black;
}

div.characteristics {
  grid-row: 2;
  grid-column: 1 / span 2;
}

.characteristics th,
td {
  padding: 2px;
  text-align: center;
  font-size: 10pt;
}

.characteristics th:last-of-type,
td:last-of-type {
  text-align: left;
}

.characteristics tr:last-of-type {
  font-weight: bold;
}

div.movement {
  grid-row: 4;
  grid-column: 2;
}

.movement th,
td {
  margin: 0px;
  padding: 0px 2px;
  text-align: left;
  font-size: 8pt;
}
<body>
  <div class="grid-container-0">
    <div class="grid-item characteristics">
      <div class="grid-container-2">
        <div class="grid-item characteristics-1 title">CHARACTERISTICS</div>
        <div class="grid-item characteristics-2">
          <table>
            <tr>
              <th>Val</th>
              <th>Char</th>
              <th>Points</th>
              <th>Roll</th>
              <th>Notes</th>
            </tr>
            <tr>
              <td>10</td>
              <td>STR</td>
              <td>0</td>
              <td>11-</td>
              <td>HTH Damage 2d6 END [1]</td>
            </tr>
            <tr>
              <td>10</td>
              <td>DEX</td>
              <td>0</td>
              <td>11-</td>
              <td></td>
            </tr>
            <tr>
              <td>10</td>
              <td>CON</td>
              <td>0</td>
              <td>11-</td>
              <td></td>
            </tr>
            <tr>
              <td>10</td>
              <td>INT</td>
              <td>0</td>
              <td>11-</td>
              <td>PER Roll 11-</td>
            </tr>
            <tr>
              <td>10</td>
              <td>EGO</td>
              <td>0</td>
              <td>11-</td>
              <td></td>
            </tr>
            <tr>
              <td>10</td>
              <td>PRE</td>
              <td>0</td>
              <td>11-</td>
              <td>PRE Attack: 2d6</td>
            </tr>
            <tr>
              <td colspan="5">&nbsp;</td>
            </tr>
            <tr>
              <td>3</td>
              <td>OCV</td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>3</td>
              <td>DCV</td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>3</td>
              <td>OMCV</td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>3</td>
              <td>DMCV</td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>2</td>
              <td>SPD</td>
              <td>0</td>
              <td></td>
              <td>Phases: 6, 12</td>
            </tr>
            <tr>
              <td colspan="5">&nbsp;</td>
            </tr>
            <tr>
              <td>2</td>
              <td>PD</td>
              <td>0</td>
              <td></td>
              <td>2 PD (0 rPD)</td>
            </tr>
            <tr>
              <td>2</td>
              <td>ED</td>
              <td>0</td>
              <td></td>
              <td>2 ED (0 rED)</td>
            </tr>
            <tr>
              <td>4</td>
              <td>REC</td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>20</td>
              <td>END</td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>10</td>
              <td>BODY</td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>20</td>
              <td>STUN</td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="3">&nbsp;</td>
              <td>0</td>
              <td>Total Characteristic Points</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="grid-item movement">
      <div class="grid-container-5">
        <div class="grid-item movement-1 title">MOVEMENT</div>
        <div class="grid-item movement-2">
          <table>
            <tr>
              <th>Type</th>
              <th>Total</th>
            </tr>
            <tr>
              <td>Run</td>
              <td>12m[24m NC]</td>
            </tr>
            <tr>
              <td>Swim</td>
              <td>4m[8m NC]</td>
            </tr>
            <tr>
              <td>H. Leap</td>
              <td>4m</td>
            </tr>
            <tr>
              <td>V. Leap</td>
              <td>2m</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

css html
1 Answers

When you write .characteristics th, td in your CSS, you're apparently expecting that to apply to .characteristics th and .characteristics td elements.

However, that isn't what it means: it actually applies to .characteristics th elements and all td elements. So that's why you're seeing styles intended for one class in places they shouldn't be.

Here's an example:

.red i, b {color:red}
.blue i, b {color:blue}
<div class="red">1 <i>2</i> <b>3</b></div>
<div class="blue">4 <i>5</i> <b>6</b></div>

You'd expect 2 and 3 to be red, and 5 and 6 to be blue, but that doesn't actually happen: both the color:red and color:blue rules apply to all b elements, so they'll end up the same color as each other (in this case, blue).

To fix this, .characteristics th, td has to be written as .characteristics th, .characteristics td (and likewise with other places where you've used commas).

user_118758450
Related