CSSで複数のセレクタ名を並べる時の記述で、要素名(タイプ名)やクラス名やID名の間に「半角スペース」を入れたり、入れずに詰めたり、「 , ( カンマ ) 」を入れたりと、いくつかの記述方法があります。
ここは間違えやすいところでもあるので、ミスしがちな 3パターンの記述方法をまとめておきます。
htmlタグをつけている要素内で、スタイルシートを軽くするなどの理由でクラス名を複数指定する場合があります。
よく使う要素は、あらかじめCSSに設定しておき、必要な時に呼び出せるようにしておけば、CSSも軽くなり、管理も楽です。
その複数指定している全てのクラス名に同じCSSを適用させる場合は、半角スペースで区切らずにセレクタを繋げて記述します。
htmlとCSSの記述方法は以下です。
1つの要素内に複数のクラス名をつける時は、以下のように記述します。
同じ要素内に複数のクラス名を指定する場合は、間に半角スペースを入れます。
上記のクラス名(「sample1」と「sample2」)に共通のCSSを適用させる場合は、以下のように記述します。
「sample1」と「sample2」はhtmlの方では同じ要素内にあるので、こちらのCSSでは半角スペースを入れずに そのまま繋げて記述します。
セレクタを指定する時に入れ子構造で記述する場合は、そこに書く要素名(タイプ名)やクラス名やID名の間に半角スペースを入れる。
半角スペースを入れることによって、親要素と子要素の関係であることを示します。
htmlとCSSの記述方法は以下。
sample-1という親要素内に記述されているsample-2に対してCSSを適用していく場合。
CSSの記述は、以下のように「sample-1」と「sample-2」の間に 半角スペースを入れる。
html上で、あらゆる箇所にあるクラス名や要素名に対して同じCSSを適用させる場合は、CSSの記述はセレクタ名同士を「 , ( カンマ ) 」で区切る。
htmlとCSSの記述方法は以下。
sample-1とsample-2の両方に同じCSSを適用させる場合
CSSの記述は、以下のように「sample-1」と「sample-2」を「 , ( カンマ ) 」で区切る
注目記事セレクション
