- 締切済み
CSSの階層？指定について
下記のようなHTMLファイルがあります。 ■HTMLファイル <dl class="menu_sp"> <dt>春メニュー</dt> <dd>メニュー１</dd> <dd>メニュー２</dd> <dd>メニュー３</dd> </dl> <dl class="menu_su"> <dt>夏メニュー</dt> <dd>メニュー１</dd> <dd>メニュー２</dd> <dd>メニュー３</dd> </dl> この場合、春メニューのメニュー１～メニュー３に対してのみ特定のスタイルを適用したい時には、 春メニュー内の<dd>に全てに適用したいクラス名を書く必要があるのでしょうか？ CSSで、タグの特定のクラスに、「タグ名.クラス名 { aaaaa : bbbbb }」と指定するのが可能なように、 特定のクラスの中のタグに、「.クラス名 タグ名 { aaaaa : bbbbb }」（この場合、.menu_sp dd { aaaaa : bbbbb }） のように指定できれば効率が良いなぁ、と思うのです。（この方法を試したのですができませんでした・・・） 春メニュー内の全ての<dd>にクラス名を指定するのではなく、もっと効率の良い方法は無いでしょうか？ よろしくお願いいたします。
- kikategoon
- お礼率40% (9/22)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
No.2様の回答のセレクタがこの場合一番適切だと思いますが、質問文中にある下記コメントについて補足を。 > 特定のクラスの中のタグに、「.クラス名 タグ名 { aaaaa : bbbbb }」（この場合、.menu_sp dd { aaaaa : bbbbb }）のように指定できれば効率が良いなぁ、と思うのです。（この方法を試したのですができませんでした・・・） できますよ。ただ、優先順位（詳細度）というのがあるので、それが適切でないと意図した通りのスタイルにはなりません。 ".menu_sp dd { aaaaa : bbbbb }"という記述を仮に【A】とします。 もしも、【A】以外に dl.menu_sp dd { aaaaa : ccccc }（これを仮に【B】とします） という指定があったら、優先順位は【B】>【A】となりますので<dl class="menu_sp">の子要素<dd>のaaaaaのスタイルとして適用されるのはbbbbbではなくcccccの方です。【B】の指定がなければ、【A】のみが<dl class="menu_sp">の子要素<dd>のaaaaaのスタイルとなりますので適用されるのはbbbbbになります。 【例1】 dl dd { color: #c00; } dl.menu_sp dd { color: #0c0; } .menu_sp dd { color: #00c; } こうだったら、<dl class="menu_sp">の子要素<dd>の文字色は「緑」になる、という事です。一方、<dl class="menu_su">の子要素<dd>の文字色は「赤」のままです。 【例2】 dl dd { color: #c00; } .menu_sp dd { color: #00c; } こうだったら、<dl class="menu_sp">の子要素<dd>の文字色は「青」になります（<dl class="menu_su">の子要素<dd>の文字色は同上）。 蛇足ですが、No.1様の回答は（多分何か勘違いをされただけだと思いますが）、dtとddの要素自体にclass属性でmenu_spの値を付けない限り無効です。文字色にredが効いているのは単に親要素dlの指定がdtとddに継承されているからです。dtとddの文字色を変えてみれば子要素独自のスタイルは適用されていない事がわかります。
- notnot
- ベストアンサー率47% (4900/10358)
dtには適用したくないがddには適用したいということなら、 dl.menu_sp dd {font-size:120%; color:red}
- edct1
- ベストアンサー率26% (4/15)
これで、どうでしょう？ ******************* <html><head> <style type="text/css"> dl.menu_sp {font-size:120%; color:red} dt.menu_sp {font-size:120%; color:red} dd.menu_sp {font-size:120%; color:red} </style> </head> <body> <dl class="menu_sp"> <dt>春メニュー</dt> <dd>メニュー１</dd> <dd>メニュー２</dd> <dd>メニュー３</dd> </dl> <dl class="menu_su"> <dt>夏メニュー</dt> <dd>メニュー１</dd> <dd>メニュー２</dd> <dd>メニュー３</dd> </dl> </body> </html>
