- 記事公開日
入れ子には親のスタイルを適用させないCSSセレクタの書き方
リストの中にリストを書きたいんだけど、親のCSSを引き継いでしまってうまくいかないの。
例えば、dl・dt・ddタグの中に、またdl・dt・ddタグを入れたいんだけど、どうやったら良い？
了解ました！
CSSセレクタを使えば、簡単です。
こちらをどうぞ↓
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>入れ子には親のCSSを適用させないリスト（dl/dt/dd）</title>
<style>
/* クラス名がfruitのdlタグだけにCSSが適用されます */
dl.fruit {
width:24rem;
margin:0 auto;
border-top:1px solid #000;
border-right:1px solid #000;
}
/* 「>」は直下の子要素を指定します。 */
/* この場合は、<dl class="fruit">直下の<div>だけにCSSが適用されます。 */
dl.fruit > div {
border-left:1px solid #000;
border-bottom:1px solid #000;
padding:1rem;
display:flex;
}
/* <dl class="fruit">直下の<div>の直下の<dt>だけにCSSが適用されます。 */
dl.fruit > div > dt {
font-weight:bold;
flex-basis:10rem;
}
/* 「~（チルダ）」は指定した要素の後に続く兄弟要素をすべて対象にします。 */
/* この場合、<dl class="fruit">直下の<div>の直下の<dt>と同じレベル（兄弟要素）となる<dd>にだけCSSが適用されます。 */
dl.fruit > div > dt ~ dd {
border:3px solid red;
width:calc(100% - 10rem);
}
/* 入れ子となるリストにCSSを適用します。 */
/* もちろん、入れ子となるdlにクラスを付けてCSSを適用することも可能です。 */
dl.fruit > div > dt ~ dd dl {
margin:0;
padding:0.5rem;
}
</style>
</head>
<body>
<dl class="fruit">
<div>
<dt>りんご</dt>
<dd>
<dl>
<div>
<dt>サンつがる</dt>
<dd>甘い</dd>
</div>
<div>
<dt>シナノゴールド</dt>
<dd>とても甘い</dd>
</div>
<div>
<dt>はるか</dt>
<dd>非常に甘い</dd>
</div>
</dl>
</dd>
</div>
<div>
<dt>みかん</dt>
<dd>すっぱい</dd>
</div>
<div>
<dt>グレープフルーツ</dt>
<dd>にがい</dd>
</div>
</dl>
</body>
</html>
このように親要素にだけスタイルが適用され、子要素にはスタイルは引き継がれません。
もちろん、dl・dt・ddタグだけでなく、ul・liタグやtableタグにも同じ要領で利用できます。