cssのstyle適応方法で質問事項

下記実装コードです。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title>質問</title>
5    <script src"../../scripts/style_DL.css">
6</head>
7<body>
8    <div id="wrapper">
9        <div class="contents-wrapper">
10            <table class="shogun-table">
11                <tr>
12                    <th>名前</th>
13                    <th>年齢</th>
14                    <th>性別</th>
15                </tr>
16                <tr>
17                    <td>足利　義輝</td>
18                    <td>男</td>
19                    <td>30</td>
20                </tr>
21                <tr>
22                    <td>織田　信長</td>
23                    <td>男</td>
24                    <td>30</td>
25                </tr>
26            </table>
27        </div>
28        <div class="contents-wrapper">
29             <table class="kerai-table">
30                <tr>
31                    <th>名前</th>
32                    <th>年齢</th>
33                    <th>性別</th>
34                </tr>
35                <tr>
36                    <td>足利　義正</td>
37                    <td>男</td>
38                    <td>25</td>
39                </tr>
40                <tr>
41                    <td>明智　光秀</td>
42                    <td>男</td>
43                    <td>25</td>
44                </tr>
45             </table>
46        </div>
47    </div>
48
49</body>
50</html>
51

style_DL
1.label-smallSize {
2    font: normal normal 9pt 'ＭＳ ゴシック';
3    text-align: left;
4    vertical-align: middle; 
5}
6
7.label-middleSize {
8    font: normal normal 11pt 'ＭＳ ゴシック'; 
9    text-align: left;
10    vertical-align: middle; 
11}
12
13.label-largeSize {
14    font: normal normal 16pt 'ＭＳ ゴシック';
15    font-weight:bold;
16    text-align: left; 
17    vertical-align: middle;
18}

質問したいこと。

style_DL.cssの.label-largeSizeを
shogun-tableのth,kerai-tableのthに適応

style_DL.cssの.label-middleSizeを
shogun-tableのtd,kerai-tableのtdに適応

上記の2点を実装する際、既存のhtmlにcolgroupなど作成し、
それぞれに対応するclassを指定すればOKなのは知っていますが、

既存のhtmlをそのままにcssにて実装する場合、
下記のような対応が可能かと思われます。

stye_DL
1.shogun-table tr th {
2    font: normal normal 16pt 'ＭＳ ゴシック';
3    font-weight:bold;
4    text-align: left; 
5    vertical-align: middle; 
6}
7.shogun-table tr td {
8    font: normal normal 11pt 'ＭＳ ゴシック'; 
9    text-align: left;
10    vertical-align: middle;    
11}
12
13.kerai-table tr th {
14    font: normal normal 16pt 'ＭＳ ゴシック';
15    font-weight:bold;
16    text-align: left; 
17    vertical-align: middle; 
18
19}
20
21.kerai-table tr td {
22    font: normal normal 11pt 'ＭＳ ゴシック'; 
23    text-align: left;
24    vertical-align: middle;    
25}
26

ただこの場合、同条件のstyleが複数個所存在し冗長的です。
そのため、上で宣言した

style_DL
1.shogun-table tr th {
2}

などの中身に.label-largeSizeを指定するような記述をしたいです。

上記の実装は可能でしょうか。
以上、よろしくお願いいたします。

※コードは即興で作ったものなので、間違っていたらすみません。

行動規範の内容に同意します

回答1件

ベストアンサー

上記の実装は可能でしょうか。

適用するセレクタを,区切りで並べれば、一括適用できます。

css
1.shogun-table tr th,
2.shogun-table tr td,
3.kerai-table tr th,
4.kerai-table tr td{
5    font: normal normal 11pt 'ＭＳ ゴシック'; 
6    text-align: left;
7    vertical-align: middle;   
8}
9
10.shogun-table tr th,
11.kerai-table tr th{
12  font-weight:bold;
13}