セレクターの種類（２）

css

classセレクタ

  • ページ内で同じ名前を繰り返し使用できる。
  • クラス名を半角スペースで区切ると複数のクラスをタグに適用できる。
  • classとidを同時に適用できる。
  • 頭文字は英字。数字はダメ。

　ｈｔｍｌ
　 class="class名"

<p class="red">・・・・・</p>
<p class="red" "center">・・・・・</p>
<p class="red" id="container">・・・・・・</p>

ｃｓｓ

　 .class名

 .red {
         color:#FF0000 ;
}

idセレクタ

  • 1つの要素にしか適用できない
  • レイアウトなどユニークな部位に使用する

　ｈｔｍｌ

　 id="id名"

<div id="container">・・・・・・・・</div>


ｃｓｓ

　 ＃id名

#container {
  margin: 0 auto ;
  width: 780px ;
  padding: 10px ;
  background: #f9ffbf;
}

子孫セレクタ

  • セレクタを半角スペースで区切るとある要素の下の階層にある要素にスタイルを適用する。

　　ｃｓｓ

p strong {
  font-size: 14px ;
}

ｐ要素内のｓｔｒｏｎｇ要素にフォントサイズ１４ｐｘを適用する。