見出し画像

CSSのセレクタについて

セレクタとはHTMLに指定された要素や範囲(タグ)に対してスタイルを適用させる基本的なセレクタです。

CSSのセレクタにはさまざまな書き方が存在します。その中でもよく使われているセレクタをいくつか紹介します。

アスタリスク(*)セレクタ
アスタリスクをセレクタにすると全てのタグに装飾が適用されます。
全てのタグが適用されるので最初の方に記載しておくことが推奨されています。※CSSは1行目から順に読み込まれるため、後に書いたセレクタが上書きされる形で適用される仕組みになっています。そのため、最初にベースとなる指定をしておき、例外があれば後から上書きするということが基本になっています。

*{ color: #000; }
h1 { color: #00ff00; }
↑この場合アスタリスクで全てのタグの色を白に設定した後、要素(h1)セレクタで<h1>タグの色を緑で上書きしています。

子孫セレクタ、複数セレクタ

① div p { background-color: #ccff00; }
② h1,a {color: #ff66cc; }

①は子孫セレクタといい、<div>タグの中にある<p>タグだけが黄緑に指定されていることになります。それ以外の<p>タグには適用されないので注意です。
②は複数セレクタといい、カンマ(,)で区切ることにより、複数のセレクタを並べることができます。<h1>タグと<a>タグを同じ指定にしたいというときに使用します。よって、<h1>タグと<a>タグにはピンク色が装飾されます。


idセレクタ、classセレクタ

例えば<p>タグの中でも特定の<p>タグだけに適用させたいといったときに使います。そのために、適用させたい特定のタグに任意の名前を付ける必要があります。タグに名前を使う場合はid属性かclass属性を使用します。idとclassの違いとしては、idタグは名前を付ける際に同じ名前にすることができないです。また、1つのタグにidは1つしか付けることができません。classタグは同じ名前のclass名を何個も使用することができます。私のような初心者のみなさんは慣れないうちはclassのみを使うことがいいかもしれません。
CSSを書く際はidは「#」、classは「.」を使います。


いいなと思ったら応援しよう!