My Vector Space

  人生は寄り道してなんぼ

htmlで1つの要素にclass名を複数指定する時の記述方法

 

htmlタグのある要素に、CSSを適用するためにclass名を指定する際、class名は複数指定することができる。 その際のhtmlとCSSの記述方法について    

 

 

htmlの記述方法

 

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

     指定したクラス名の後に 半角スペースを入れることで、複数のクラス名をつけることが

 できる。  

 

 

CSSの記述方法

 

 【 CSS 】
 1
  .sample1  sample3{
 2
      color:#000000;
 3
      font-size:12px;
 4
  }
 5
   
 6
 .sample1.sample2{
 7
       font-weight:bold;
 8
  }

 

●sample1の要素内に記述されているsample3にCSSを適用する場合は、間に半角スペー

 スを入れて    区切ることで 複数セレクタを設定することができる。

 

●sample1とsample2の2つのclass名に同時に値を設定したい場合は、2つとも同じ要素内

 にあるのでclass名を半角スペースで区切らずに、そのまま繋げて記述できる。

 

こうしたclass名を複数指定した記述にすることで、ソースコードが無駄に増えることもなく、管理も楽になる。

例えば よく使う要素は、あらかじめCSSに設定しておき、必要な時に呼び出すようにしておくなど。      

PAGE TOP