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;
}