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になります。
ブラウザでは以下のように表示されます。
p
divには効いていますが、pには効いていません。
このようにCSSを効かせたいhtmlの箇所を指定するのがセレクタです。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓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にだけ指定することができます。
その他のセレクタや具体例については下記記事をご覧ください。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
