ホーム(記事一覧)へ

CSSセレクタとは【CSSを適用させる対象】

↓続き

CSSセレクタとは

CSSプロパティはhtmlタグに対して指定することになります。どのhtmlタグを対象とするのか指定するのがCSSセレクタです。

たとえば以下のようなhtmlがあったとします。

<body>
<div>div</div>
<p>p</p>
</body>

このdivにCSSを指定する場合以下のように記述します。

div{
border:1px solid #999;
}

※borderは線を指定するCSSプロパティです。

このときのセレクタはdivになります。

 

ブラウザでは以下のように表示されます。

div

p

divには効いていますが、pには効いていません。

このようにCSSを効かせたいhtmlの箇所を指定するのがセレクタです。

classとid【特定のタグを指定】

ではdivが複数あり、特定のタグにだけ指定したいときはどうすればいいでしょうか。

classやidを使ってhtmlタグに任意の名前を指定します。

名前には半角英数_(アンダーバー)-(ハイフン)が使えます。ただし、頭文字はアルファベットでなくてはいけません。

<body>
<div class="aaa">テキスト</div>
<div id="bbb">テキスト</div>
</body>

 

CSSでは書き方が少し違います。

classの場合は.(ドット)と値をスペースなしで記述します。

idの場合は#(シャープ)と値をスペースなしで記述します。

.aaa{
border:1px solid #999;
}
#bbb{
color:red;
}

ブラウザの結果は以下のようになります。

テキスト
テキスト

classとidの違い

classもidも特定のタグを指定するという点は同じです。では何が違い、どう使い分ければいいのでしょうか。

classとidはhtml内に同じ値が登場していい回数が異なります

classの値は何度でも登場していいです。

idの値は1度だけです。

idの例

同じidを記述(禁止

<div id="A"></div>
<div id="A"></div>

違うidを記述(OK)

<div id="A"></div>
<div id="B"></div>

classの例

同じclassを記述(OK)

<div class="A"></div>
<div class="A"></div>

違うclassを記述(OK)

<div class="A"></div>
<div class="B"></div>

よってidはヘッダーやメインコンテンツなど各htmlに1回しかでてこない要素に指定し、classはリストなど複数回使う可能性がある要素に使うことに向いています。

慣れないうちはclassだけ使うのも手です。

その他にもclassとidの違いがあります。詳しくは下記の記事をご覧ください。

よく使うセレクタ

classやidは便利ですが、その都度htmlのソースを編集しなければならないというデメリットがあります。

セレクタの中にはclassやidに依存しないセレクタもあります。これらをうまく使うとhtmlをほとんど編集せずにCSSを指定することができます。そんな中からよく使うセレクタを紹介します。

E F

Eの子孫にあるすべてのF

セレクタとセレクタの間に半角スペースが入ります。

E>F

E直下の子要素F

セレクタとセレクタの間に>が入ります。

F:first-of-type

最初に現れるF

上記と組み合わせ「ul.aaa>li:first-of-type」という使い方をすると「クラスがaaaのulの直下のliの一番目」という指定ができます。

F:last-of-type

最後に現れるF

first-of-typeは「最初」でしたが、last-of-typeは「最後」です。

a:hover

Fがホバーされているとき

リンクにおいてマウスを乗せたときに変化させることでリンクであることに気付きやすくさせることができます。

hoverはaタグ以外にも使えます。

例えば「li:hover a」とすると「liにマウスが乗っているときの子孫のa」に対する指定ができます。

a:visited

訪問済みリンク

見たことのあるリンクに対して色などを変えることができます。これにより新しい記事がどれなのかわかりやすくなります。

E[foo="bar"]

foo属性がbarと一致するE

inputタグとセットで使うことが多いです。inputタグはフォームなどで使うことが多いタグです。これはtype属性の値によってまったく異なる性質に変化します。

一方でセレクタに「input」だけ指定するとすべてのinputタグに効いてしまいます。「input[type="checkbox"]」のようにするとチェックボックのinputにだけ指定することができます。

 

その他のセレクタや具体例については下記記事をご覧ください。

関連記事