複合セレクタとは
CSSにおいて、基本セレクタを組み合わせてより高度な選択を行うための方法が複合セレクタです。 ① 複合セレクタは目標要素を選択する際に高い精度と効率性を持ちます ② 二つ以上の基本セレクタを異なる方法で結合して形成されます ③ 代表的な複合セレクタには、子孫セレクタ、子供セレクタ、グループセレクタ、疑似クラスセレクタなどが含まれます
子孫セレクタ (重要)
子孫セレクタは親要素内のすべての子孫要素を選択します。その書き方は外側の要素を先に書き、内側の要素を後ろに書くことで実現され、間にスペースを入れます。 文法：
selector1 selector2 { 宣言 }
例えば：
nav ul li { 宣言 } /* nav 内のすべての li タグを選択 */
- selector1 と selector2 の間にスペースが必要
- selector1 は親要素、selector2 は子孫要素であり、最終的に選択されるのは selector2
- selector2 は直接の子供でも孫でも構いません、重要なのは selector1 の子孫であること
- selector1 と selector2 は任意の基本セレクタで可能です
子供セレクタ (重要）
子供セレクタは直近の子要素のみを選択します。つまり、親要素の「直接の子供」だけを選択します。 文法：
selector1 > selector2 { 宣言 }
例：
section > article { 宣言 } /* section 内の直近の article 要素を選択 */
- selector1 と selector2 の間に「>」を使用
- selector1 は親要素、selector2 は子要素であり、最終的に選択されるのは selector2
- selector2 は必ず親の直下にある必要があります
<style>
section>article {
width: 150px;
height: 100px;
background-color: blue;
border: 2px solid gray;
}
</style>
<body>
<section>
<article>直接の子供</article>
<div><article>孫ではない</article></div>
</section>
</body>
グループセレクタ (重要）
グループセレクタは複数の要素に対して同じスタイルを適用します。通常、まとめて宣言するために使用されます。各セレクタはコンマで区切られます。 文法：
selector1, selector2 { 宣言 }
例：
header, footer { 宣言 } /* header と footer 両方を選択 */
- selector1 と selector2 の間にカンマが必要
- カンマは「かつ」を意味します
- グループセレクタは多数の要素に共通のスタイルを設定するのに便利
<style>
h1, p {
color: purple;
}
</style>
<body>
<h1>タイトル</h1>
<p>本文</p>
</body>
疑似クラスセレクタ
疑似クラスセレクタはリンクや特定の位置にある要素などに特殊な効果を追加するためのものです。 例えば :hover や :first-child などのようにコロン（:）で表記されます。
リンク用疑似クラスセレクタ
リンク用疑似クラスセレクタの注意点：
- 効果を確実に出すためには :link → :visited → :hover → :active の順番で宣言してください。
- 記憶法として "Love Hate" を使うことができます。
- リンクにはデフォルトのスタイルがあるため、個別にスタイルを指定することが推奨されます。
a:link { color: black; }
a:visited { color: gray; }
a:hover { color: red; }
a:active { color: orange; }
:focus 疑似クラスセレクタ
:focus はフォーカスを受けたフォーム要素を選択します。
input:focus {
background-color: lightblue;
}