

以下HTMLで、titile_area,body_areaのみCSSを反映させたいが、どうしたらいいか？  
現状は、titile_area,body_area以外の部分にも適用されてしまう。

[code]

    <div class="title_area">
    <table>
      <tr>
        <th>A</th>
        <th>B</th>
      </tr>
    </table>
    </div>
    
    <div class="body_area">
      <table>
        <tbody>
        <tr>
          <td>1a</td>
          <td>1b</td>
        </tr>
        <tr>
          <td>2a</td>
          <td>2b</td>
        </tr>
        </tbody>
      </table>
    </div>
    
    <div class="x_area">
    <!-- この内部では以下CSSを適用させたくない -->
    <table>
      <thead>
      <tr>
        <th>A Xarea</th>
        <th>B Xarea</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1a Xarea</td>
        <td>1b Xarea</td>
      </tr>
      </tbody>
      </table>
    </div>
    
    <div>
    <!-- ここには、id,classがない。この内部では以下CSSを適用させたくない -->
    <table>
      <thead>
      <tr>
        <th>AAAA title</th>
        <th>BBBB title</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1aaaaa</td>
        <td>1bbbbb</td>
      </tr>
      </tbody>
      </table>
    </div>
    
    
[/code]

[code]

    div.body_area  thead, tbody {
        width: 100%;
        display: block;
    }
    div.body_area tr {
        width: 100%;
    }
    div.body_area tbody {
        width: 100%;
        height: 100px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    div.title_area tbody {
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    
[/code]


CC BY-SA 4.0
2019-10-27T13:02:00.670
60014
2019-10-27T13:30:09.770
2019-10-27T13:16:21.990
32986
28590
question
css
同じ画面内で特定のエリアのみcssを反映させたい


質問文の CSS を読むと、すべての `table` 要素の子孫要素へ適用される装飾は、 `tbody`
要素に対する装飾のみであることがわかります。なぜなら、 `tbody` 要素以外の要素は以下のように、
**クラス名によって適用される要素の親要素が限定されている** ためです。

  * `.body_area` クラスが付与された `div` 要素の子孫にある `tbody`, `thead`, `tr` 要素
[code]     div.body_area thead {

      width: 100%;
      display: block;
    }
    
    div.body_area tr {
      width: 100%;
    }
    
    div.body_area tbody {
      width: 100%;
      height: 100px;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    
[/code]

  * `.title_area` クラスが付与された `div` 要素の子孫にある `tbody` 要素
[code]     div.title_area tbody {

      width: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    
[/code]

そのため、今回修正する必要があるセレクタは `tbody`
要素に対するものだけであるということになり、これは開発者ツールを使用することでも確認が出来ます。装飾を適用したい `tbody` 要素は、 HTML
を読むと、 **`class` 属性が付与されており、かつ `.x_area` クラスが適用されていない `div` 要素の子孫に存在する `tbody`
要素**だとわかります。これをセレクタとして書き起こすと、 `div[class]:not(.x_area) tbody` というようになります。

[code]

    div.body_area thead,
    tbody {
      width: 100%;
      display: block;
    }
    
    div.body_area tr {
      width: 100%;
    }
    
    div.body_area tbody {
      width: 100%;
      height: 100px;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    
    div.title_area tbody {
      width: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
    }
[/code]

[code]

    <div class="title_area">
      <table>
        <tr>
          <th>A</th>
          <th>B</th>
        </tr>
      </table>
    </div>
    
    <div class="body_area">
      <table>
        <tbody>
          <tr>
            <td>1a</td>
            <td>1b</td>
          </tr>
          <tr>
            <td>2a</td>
            <td>2b</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="x_area">
      <!-- この内部では以下CSSを適用させたくない -->
      <table>
        <thead>
          <tr>
            <th>A Xarea</th>
            <th>B Xarea</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1a Xarea</td>
            <td>1b Xarea</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div>
      <!-- ここには、id,classがない。この内部では以下CSSを適用させたくない -->
      <table>
        <thead>
          <tr>
            <th>AAAA title</th>
            <th>BBBB title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1aaaaa</td>
            <td>1bbbbb</td>
          </tr>
        </tbody>
      </table>
    </div>
[/code]

このセレクタを用いて CSS を以下のように編集します。すると、 `div`
要素のうち装飾を行わない要素のみ、ユーザーエージェントスタイルシート以外の装飾が行われていないことから、このセレクタが正しく動作し、質問者さんの実現したいことが行えたということがわかります。

[code]

    div.body_area thead,
    div[class]:not(.x_area) tbody {
      width: 100%;
      display: block;
    }
    
    div.body_area tr {
      width: 100%;
    }
    
    div.body_area tbody {
      width: 100%;
      height: 100px;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    
    div.title_area tbody {
      width: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
    }
[/code]

[code]

    <div class="title_area">
      <table>
        <tr>
          <th>A</th>
          <th>B</th>
        </tr>
      </table>
    </div>
    
    <div class="body_area">
      <table>
        <tbody>
          <tr>
            <td>1a</td>
            <td>1b</td>
          </tr>
          <tr>
            <td>2a</td>
            <td>2b</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="x_area">
      <!-- この内部では以下CSSを適用させたくない -->
      <table>
        <thead>
          <tr>
            <th>A Xarea</th>
            <th>B Xarea</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1a Xarea</td>
            <td>1b Xarea</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div>
      <!-- ここには、id,classがない。この内部では以下CSSを適用させたくない -->
      <table>
        <thead>
          <tr>
            <th>AAAA title</th>
            <th>BBBB title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1aaaaa</td>
            <td>1bbbbb</td>
          </tr>
        </tbody>
      </table>
    </div>
[/code]


CC BY-SA 4.0
2019-10-27T13:30:09.770
60016
2019-10-27T13:30:09.770
32986
60014
answer