CSSの基本セレクターを学んで使ってみよう。

2020年12月17日CSS

HTMLとCSSを紐付けるために使うのが、セレクターです。

CSSのセレクターの知識は自由にHTMLを装飾する上で基本的な土台となるので、しっかりと学んでいきましょう。

CSSの基本セレクターの種類

要素型セレクター

要素型セレクターは、HTMLタグを指定するだけで使えます。

 

属性セレクター

属性セレクターも同様に、HTMLの属性を指定して、[]で囲むと指定することができます。

 

classセレクター

classセレクターは、HTMLタグの属性の値に名前をつけて紐付けします。

CSSで指定する際は、.(ピリオド)を先頭につけて、.クラス名という形で指定します。

要素型セレクターや属性セレクターで指定できるところでも、classセレクターを使うことができます。

メリットとしては、同じclassセレクターなら同じスタイルを適用できます。

classセレクターは、class="info title" といった具合に複数つけることもできます。

  <h1 class="info title">h1見出し</h1>
  <p class="info">classセレクターのサンプルです。</p>
  <h2>h2見出し</h2>
  <p>classセレクターのサンプルです。</p>
.info {
  color: skyblue;
}

.title {
  font-weight: normal;
}

idセレクター

idセレクターは、classセレクターと同様にHTMLタグの属性の値に名前をつけて紐付けします。

CSSで指定する際は、#(ハッシュ)を先頭につけて、#id名という形で指定します。

要素型セレクターや属性セレクターで指定できるところでも、idセレクターを使うことができます。

classセレクターとの違いとしては、idセレクターは同じページ内で同じidを使ってはいけないという点です。

また、class属性のように空白を入れてはいけないというルールもあるので、複数指定することもできません。

メリットとしては、一意に決まるという点です。

<h1 id="title">h1見出し</h1>
  <p>idセレクターのサンプルです。</p>
<h2 id="info">見出し</h2>
<p>idセレクターのサンプルです。</p>
/* h1 { */
#info {
  color: skyblue;
}

#title {
  font-weight: normal;
}

 

全称セレクター

全称セレクターは、(*)アスタリスクで指定する方法で、ページの全部に反映されます。

CSS

Posted by devsakaso