本記事は筆者の独学のメモ書きのようなものなので、
読者の皆様は参考にしないで下さい。
あくまで、筆者の復習用です。
目次
1.はじめに
2.結合子を使ったセレクターの種類
3.ユニバーサルセレクター
4.子孫セレクター
5.子セレクター
6.隣接セレクター
7.間接セレクター
8.おわりに
1. はじめに
本記事では、CSSの「結合子を使ったセレクターの指定」について記載する。
2. 結合子を使ったセレクターの種類
<凡例>
3. ユニバーサルセレクター
ユニバーサルセレクターとは？
全ての要素を対象とする場合に使用する。
【サンプル】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
* {
margin: 0;
}
【表示例】
<before>
<after>
4. 子孫セレクター
子孫セレクターとは？
・親とその子孫という形で指定するセレクター。
・親と子孫は半角スペースで区切る。
・子孫はいくつでも指定できる。
・idセレクター、classセレクター、要素セレクターなど他のセレクターと組み合わせて指定します。
【サンプル】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
p strong {
color: red;
}
【表示例】
<before>
<after>
5. 子セレクター
子セレクターとは？
・親と直下の要素で指定するセレクターのこと。
・親と子は「>」で区切る。
・子は、いくつでも指定ができる。
・子孫セレクタと同じくidセレクタ、classセレクタ、要素セレクタなど他のセレクタと組み合わせて指定する。
・子孫セレクタとの違いは、親の直下の要素のみが対象となる。
【サンプル】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
p > strong {
color: red;
}
【表示例】
<before>
<after>
6. 隣接セレクター
セレクタを + で区切ると、同じ階層にある要素同士で、 ある要素の直後に隣接している要素を対象にスタイルを適用することができる。
【サンプル】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
h2 + p {
color: red;
}
【表示例】
<before>
<after>
7. 間接セレクター
間接セレクターとは？
・親要素が同じ兄弟関係の弟に適用されるセレクター。
・隣接セレクターは直後の弟に対してのみに対し、兄弟関係であれば間に別の要素が入っても適用される。
【サンプル】
index.html
<body>
<h1>結合子を使ったセレクター</h1>
<h2>今日の<strong>注意事項</strong></h2>
<p>家に帰ったら<strong>手洗い</strong>をしましょう。</p>
<p>アルコール消毒をしましょう。</p>
</body>
styles.css
h1 ~ p {
color: red;
}
【表示例】
<before>
<after>
8. おわりに
本記事で説明不足な点もあると思うので、以下MDN参照リンクあり。
MDNのリンク:https://developer.mozilla.org/ja/
↧