CSSにおける複数セレクターの連結
複数のセレクターの条件を同時に満たす要素を選択するには、 これらのセレクターをスペースを空けずに連結して記述します。
例えば、次のセレクターは、クラスbbbと
クラスzzzの両方を同時に持つ要素を選択します:
.bbb.zzz {
}
次のセレクターは、h2タグであり、
かつクラスbbbとクラスzzzの両方を
同時に持つ見出し要素を選択します:
h2.bbb.zzz {
}
この方法で、任意のセレクター構成を作成できます。 使用するセレクターの順序は結果に影響しませんが、 タグセレクターは必ず先頭に置くというルールがあります。
つまり、例えば.bbb.zzzと.zzz.bbbは
完全に同等です。
さらに、idを使用したセレクターも形成できます。
例えば:#elem.eee、h2#elem.eee、
h2.eee#elemなど。
以下のコードのセレクターが何を選択するか説明してください。 その後、そのセレクターに適合するHTMLコードを記述してください。 セレクターを含むコードは次の通りです:
.bbb.zzz {
color: red;
}
以下のコードのセレクターが何を選択するか説明してください。 その後、そのセレクターに適合するHTMLコードを記述してください。 セレクターを含むコードは次の通りです:
h2.bbb.zzz {
color: red;
}
以下のコードのセレクターが何を選択するか説明してください。 その後、そのセレクターに適合するHTMLコードを記述してください。 セレクターを含むコードは次の通りです:
#elem.bbb {
color: red;
}
以下のコードのセレクターが何を選択するか説明してください。 その後、そのセレクターに適合するHTMLコードを記述してください。 セレクターを含むコードは次の通りです:
#elem.bbb.zzz {
color: red;
}
以下のコードのセレクターが何を選択するか説明してください。 その後、そのセレクターに適合するHTMLコードを記述してください。 セレクターを含むコードは次の通りです:
h2#elem.bbb {
color: red;
}