⊗mkPmSlSST 68 of 250 menu

CSSにおける複数セレクターの連結

複数のセレクターの条件を同時に満たす要素を選択するには、 これらのセレクターをスペースを空けずに連結して記述します。

例えば、次のセレクターは、クラスbbbと クラスzzzの両方を同時に持つ要素を選択します:

.bbb.zzz { }

次のセレクターは、h2タグであり、 かつクラスbbbとクラスzzzの両方を 同時に持つ見出し要素を選択します:

h2.bbb.zzz { }

この方法で、任意のセレクター構成を作成できます。 使用するセレクターの順序は結果に影響しませんが、 タグセレクターは必ず先頭に置くというルールがあります。

つまり、例えば.bbb.zzz.zzz.bbbは 完全に同等です。

さらに、idを使用したセレクターも形成できます。 例えば:#elem.eeeh2#elem.eeeh2.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; }
日本語
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
当サイトでは、サイトの動作、分析、パーソナライゼーションのためにクッキーを使用しています。 データ処理はプライバシーポリシーに従って行われます。
すべて受け入れる 設定 拒否