【CSS】見た目の適用対象を指定する種類 (セレクタ)
プロパティを適用する対象を指定するのに使うもののことをセレクタと呼びます。子要素だけ対象にする、チェックボックスがついていたら対象にするなど、幅広いセレクタを紹介します。
かなり種類が多く、入門とは言えないものも含まれているため、まずはタグ名、class名、id名、子孫要素の指定を把握しましょう! (重要なものに★を付けました)
基本的なセレクタ
classとidに関しては、次のページを参照してください。
タグ名 (★)
HTMLのタグ名で指定したい場合、そのままタグ名を書きます。
See the Pen css selector tag by Totori (@souki202) on CodePen.
上の例だと、divタグはcssで何も指定されていないため、特に変化がないことがわかります。
class名 (★)
class名で指定する際は、頭にドットを付けます。
例えば、<div class="hoge">hoge class</div>というタグがあった場合、対象は.hogeとすると適用されます。
See the Pen css selector class by Totori (@souki202) on CodePen.
id名 (★)
id名で指定する際は、頭に#を付けます。例えば、<div id="app"></div>というタグがあった場合、#appとすると適用されます。
See the Pen css selector id by Totori (@souki202) on CodePen.
その他の属性で指定
class, id以外は、[属性名=値]という書き方で指定できます。
例えば、<a href="https://example.com">...</a>というタグがあった場合、[href=https://example.com]のように指定します。
See the Pen css selector attr by Totori (@souki202) on CodePen.
値を指定する際は、完全一致、前方一致、部分一致などを利用できます。
=完全一致~=値が複数ある場合に, どれか1つが一致-
|=指定した値と一致するか, その値で始まり, 直後にハイフンで続く
[lang|=ja]とすると,jaやja-jpなどと一致 ^=指定した値で始まる$=指定した値で終わる*=部分一致
また, [attr="hoge" i]のように、最後にiかIを付けると、大文字小文字の区別なしに比較できます。
さらに、[href]のように、プロパティだけ書けば、そのプロパティが存在する場合に対象になります。
ワイルドカード
すべての要素を指定したい場合に利用します。
*のみならWebページ全体が、p *とすれば、pの要素の子孫要素すべてが対象になります。
See the Pen css selector wildcard by Totori (@souki202) on CodePen.
要素同士の関係で指定
上記のタグ名やclass名などを利用したものを複数つなげることで、特定の要素の子要素に適用、などと言ったことが可能です。
また、これらは必ず左側から絞り込んでいく、という挙動になります。
子孫要素を指定 (★)
子孫要素や兄弟要素については、次のページを確認してください。
親側からスペース区切りで指定します。親側からだんだん対象を狭くしていくイメージです。
例えば、.hoge pとすると、hogeというクラスを持つ要素の子孫要素かつpタグの要素すべてが対象になります。
#app section .post-imageなら、
- まずidが
#appの子孫要素に絞り込む - その中から、さらにタグが
sectionの子孫要素に絞り込む - さらにその中から、classが
post-imageである要素
が対象になります。ここで、道中にある#appやsectionは適用対象にならず、最終的に絞り込んだ結果のみが対象になります。
See the Pen class selector child by Totori (@souki202) on CodePen.
1つのタグに設定された属性等を複合指定
例えば、hogeとfugaの2つのクラスを持つ要素を指定したいといった場合、それらをスペースを開けずに並べると指定できます。つまり、より厳密に指定できるということです。
pタグかつfooというクラス名を持っているのを対象としたい場合、p.fooのように書きます。
ここで、タグ名が入る場合、それを1番目に持ってくる必要があります。
See the Pen css selector multi by Totori (@souki202) on CodePen.
子要素のみを指定
要素の子要素のみ(孫要素を含みたくない)場合、>をはさみます。
See the Pen css selector child strict by Totori (@souki202) on CodePen.
兄弟要素を指定
~を用いることで、より後方にある兄弟要素を指定できます。前方にある要素には適用されません。
例えば、A ~ Bで指定したとき、Aと同じ階層にある要素の内、より後方にあるもののみ適用されます。
See the Pen css selector brother by Totori (@souki202) on CodePen.
隣接した兄弟要素を指定
~では後方のすべての要素でしたが、+を用いると次の要素だけ、という指定になります。
See the Pen css selector brother strict by Totori (@souki202) on CodePen.
擬似クラス系
:〇〇とするような擬似クラスのまとめです。他にも様々な擬似クラスがありますが、ここでは利用頻度が比較的高いものを紹介します。
カーソルが乗っているかで指定
:hoverを利用します。非常によく利用します。
See the Pen css selector hover by Totori (@souki202) on CodePen.
兄弟要素のn番目を指定
:nth-child()を用いることで、そのタグが持つ要素のn番目の要素に適用できます。
See the Pen css selector nth-child by Totori (@souki202) on CodePen.
ul li:nth-child(2)とすれば、ulの子孫要素のうち、2番目のliが対象、ということです。
ul li:nth-child(3n)であれば、ulの子孫要素のうち、3, 6, 9, 12, ...番目のliが対象になります。
2n-1なら、1, 3, 5, 7, 9...番目になります。
注意点として、ul :nth-child(2)のような書き方はできません。li:nth-child(2)のように、必ずタグやクラス名など、擬似クラス以外のセレクタと複合する必要があります。
CやJavascriptなど、ほとんどのプログラミング言語では配列のインデックスが0から始まりますが、CSSは1から始まります。
兄弟要素の最初と最後を指定
:first-child, :last-childを利用します。
See the Pen css selector first-last by Totori (@souki202) on CodePen.
一致しない要素を指定
:not()を利用します。基本的には、一致する要素の中から除外する、といった使い方が多いと思います。
See the Pen css selector not by Totori (@souki202) on CodePen.
ラジオボタンやチェックボックスにチェックが入っているかで指定
:checkedを利用します。
また、これはチェックボックスの見た目を変えるよりも、その兄弟要素の表示を切り替える、といった使い方が多いと思います。
See the Pen css selector checked by Totori (@souki202) on CodePen.
疑似要素
疑似要素は、セレクタで指定した要素に対し、擬似的に要素を加えるなどをします。他にも様々な擬似要素がありますが、ここでは利用頻度が比較的高いものを紹介します。
before, after
::beforeを付けることで指定した要素の手前に、::afterなら後に疑似要素を作成します。
See the Pen css selector before by Totori (@souki202) on CodePen.
これらは文字を表示するというよりも、特定の図形やアイコンをつける、エフェクトを付ける、といったような使い方が主になります。
これらの要素は、指定した要素の内側に配置されます。
複数のセレクタで一括指定
それぞれのセレクタをカンマ(,)で並べることで、複数のセレクタに同じプロパティを設定できます。
See the Pen css selector multi specify by Totori (@souki202) on CodePen.
まとめ
CSSのセレクタは、単にタグ名や子孫要素を指定するだけではありません。チェックボックスの状態、あらゆる属性の値、兄弟要素など、様々なセレクタが利用できます。
シンプルな見た目なら最初の3つと子孫要素の指定だけで十分ですが、リッチなページを作る場合は、before, afterの把握など、幅広い範囲の知識を得ておくとスムーズになります。
