CSS class styles affecting HTML elements outside of class definition

0
96
html - Animation after toggling doesn't apply the second style


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 work example of the code is below. It can run at link from w3chools.com.

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.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: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;
}
</style>
</head>
  <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>
</html>



Source link

Leave a reply

Please enter your comment!
Please enter your name here