My Vector Space

人生は寄り道してなんぼ

トップ > HTML / CSS > CSSで複数のセレクタ名を並べる時の記述で間違えやすいこと

CSSで複数のセレクタ名を並べる時の記述で間違えやすいこと

HTML / CSS
f:id:ooigawa-bitter-sweet:20181019215223j:plain

CSSで複数のセレクタ名を並べる時の記述で、要素名(タイプ名)やクラス名やID名の間に「半角スペース」を入れたり、入れずに詰めたり、「 , ( カンマ ) 」を入れたりと、いくつかの記述方法があります。

ここは間違えやすいところでもあるので、ミスしがちな 3パターンの記述方法をまとめておきます。

目  次
                                                                                                                                                  
1.  htmlで同じ要素内にクラス名を複数指定していて、その全てに同じCSSを適用する場合

htmlタグをつけている要素内で、スタイルシートを軽くするなどの理由でクラス名を複数指定する場合があります。

POINT
よく使う要素は、あらかじめCSSに設定しておき、必要な時に呼び出せるようにしておけば、CSSも軽くなり、管理も楽です。

その複数指定している全てのクラス名に同じCSSを適用させる場合は、半角スペースで区切らずにセレクタを繋げて記述します。

htmlとCSSの記述方法は以下です。

htmlの記述

1つの要素内に複数のクラス名をつける時は、以下のように記述します。

 【 html 】
 1
  <div  class="sample1  sample2">
 2
      <p  class="sample3">サンプルテキスト</p>
 3
  </div>
注意点

同じ要素内に複数のクラス名を指定する場合は、間に半角スペースを入れます。

CSSの記述

上記のクラス名(「sample1」と「sample2」)に共通のCSSを適用させる場合は、以下のように記述します。

 

 【 CSS 】
 1
  .sample1.sample2{
 2
 font-weight:bold;
 3
 }
 4
 

「sample1」と「sample2」はhtmlの方では同じ要素内にあるので、こちらのCSSでは半角スペースを入れずに そのまま繋げて記述します。

                                                                                                                                                
2.  セレクタを指定する時に入れ子構造で記述する場合

セレクタを指定する時に入れ子構造で記述する場合は、そこに書く要素名(タイプ名)やクラス名やID名の間に半角スペースを入れる。
半角スペースを入れることによって、親要素と子要素の関係であることを示します。

htmlとCSSの記述方法は以下。

htmlの記述

sample-1という親要素内に記述されているsample-2に対してCSSを適用していく場合。

 【 html 】
 1
 <div  class="sample-1">
 2
   <p  class="sample2">サンプルテキスト</p>
 3
 </div>
CSSの記述

CSSの記述は、以下のように「sample-1」と「sample-2」の間に 半角スペースを入れる。

 【 CSS 】
 1
  .sample1  sample2{
 2
      color:#000000;
 3
      font-size:12px;
 4
  }
 5
 
関連記事

【 CSSが効かない時の対処法 】 セレクタ名の書き方で「 優先順位 」が決まる
CSSが効かないという状態になった時、大概は以下のようなミスが原因になっていることが多いと思います。この記事では、特に気をつけておきたい「セレクタの記述の…

                                                                                                                                        
3.  あらゆる箇所にあるクラス名や要素名を複数同時に指定してCSSを適用させる場合

html上で、あらゆる箇所にあるクラス名や要素名に対して同じCSSを適用させる場合は、CSSの記述はセレクタ名同士を「 , ( カンマ ) 」で区切る。

htmlとCSSの記述方法は以下。

htmlの記述

sample-1とsample-2の両方に同じCSSを適用させる場合

 【 CSS 】
 1
  .<div  class="sample-1">
 2
    <p>サンプルテキスト</p>
 3
  </div>
 4
  <div  class="sample-2">
 5
    <p>サンプルテキスト</p>
 6
 </div>
CSSの記述

CSSの記述は、以下のように「sample-1」と「sample-2」を「 , ( カンマ ) 」で区切る

 【 CSS 】
 1
  .sample1,sample2{
 2
      color:#000000;
 3
      font-size:20px;
 4
      font-weight:bold;
 5
     }
PICK UP
注目記事セレクション
PAGE TOP