CSSセレクタまとめ-チートシートにどうぞ
頭の整理のために、CSSセレクタをまとめました。
詳細度も併せて紹介するので、チートシートにもなるはずです。
よければ、参考にしてください。
CSSセレクタ まとめ
まず、セレクタを表にして紹介します。
| 名称 | 例 | 説明 | 詳細度 |
|---|---|---|---|
| 要素セレクター | h1 { } | HTML要素に対するセレクタ | 1 |
| 全称セレクター | * { } | 全てを対象にするセレクタ | 0 |
| クラスセレクター | .box { } | クラスに対するセレクタ | 10 |
| ID セレクター | #unique { } | id属性に対するセレクタ | 100 |
| 属性セレクター | a[title] { } | id以外の属性に対するセレクタ | 10 |
| 擬似クラスセレクター | p:first-child { } | 疑似クラスに対するセレクタ | 10 |
| 疑似要素セレクター | p::first-line { } | 疑似要素に対するセレクタ | 1 |
| 子孫結合子 | article p | 階層関係ない子孫に対するセレクタ | 足し算により算出される |
| 子結合子 | article > p | 子結合子 | 足し算により算出される |
| 隣接兄弟結合子 | h1 + p | 隣接兄弟 | 足し算により算出される |
| 一般兄弟結合子 | h1 ~ p | 一般兄弟 | 足し算により算出される |
それでは、それぞれ具体的に解説していきますね。
要素セレクタ
まずこちらは、HTML要素に対するセレクタになります。
そのままなので、そこまで説明は必要ないかと思います。
例えば、以下のように使用することができます。
h2{
color: red;
}
div{
display: block;
}
全称セレクタ
こちらは、全ての要素に対してのセレクタになります。
例えば、以下のように設定した場合は、全ての要素からmarginが消えます。
*{
margin: 0;
}
また、以下のようにすることで、全ての最初の項目にスタイルを当てることができます。
*:first-child{
margin: 0;
}
ただ、この場合は"*"を省略しても同じ意味になるので、可読性のために使用されます。
クラスセレクタ
次は、クラスに対するセレクタになります。
こちらも説明は不要かと思います。
以下のように使用することができます。
.title2{
color: Red;
}
IDセレクタ
次は、id属性に対するセレクタになります。
こちらは、今回紹介するセレクタの中では、最も詳細度が高くなります。
以下のように使用することができます。
#about{
color: Red;
}
属性セレクタ
次に紹介するのが、属性セレクタになります。
先ほどidセレクタを紹介しましたが、それ以外の属性に対してもセレクタを書くことができます。
ただ、こちらは少し複雑になります。
まず、一般的な書き方は以下の通りです。
/* 属性を指定する */
[hidden]{
display: inline;
}
/* 属性と要素を指定する */
a[hidden]{
display: inline;
}
/* 属性とその値を指定する */
[title="about"]{
display: inline;
}
そして、正規表現などを使って、以下のように自由度高く書くことも可能です。
/* 属性とその値を指定する(属性値が複数の場合でも適用される) */
[title~="about"]{
display: inline;
}
/* 属性が一致し、その値がtest-から始まる場合に適用される */
[title^="test-"]{
display: inline;
}
/* 属性が一致し、その値が-testで終わる場合に適用される */
[title$="-test"]{
display: inline;
}
/* 属性が一致し、その値がtestという文字列を含んでいる場合に適用される */
[title*="test"]{
display: inline;
}
/* 大文字・小文字関係なく判定される */
[title="about" i]{
display: inline;
}
疑似クラスセレクタ
次に、疑似クラスセレクタについて解説していきます。
疑似クラスは、特定の状態にある要素を選択するセレクターです。
例えば、hoverしてる時や、activeな時などにもスタイルを指定することができます。
具体的には、以下のように":"を使って指定できます。
a:hover{
color: red;
}
疑似クラスは様々な種類があり、主に使うものは次のとおりです。
| 名称 | 意味 |
|---|---|
| :link | まだ訪問していないリンク |
| :visited | 訪問したことがあるリンク |
| :hover | ホバーされている時 |
| :active | クリックされた時など、アクティブな時 |
| :focus | フォーカスが当たっている時 |
| :placeholder-shown | プレースホルダー |
| :required | フォームの必須要素 |
| :nth-child(~) | ~番目の子要素 |
| :first-child | 最初の子要素 |
| :last-child | 最後の子要素 |
| :contains("hoge") | "hoge"という文字列を含んでいる場合 |
| :not() | 否定要素 |
疑似要素セレクタ
疑似要素は少し説明が難しいですが、新しいHTML要素作り出したかのように振る舞うことができます。
見た方が早いと思うので、主な疑似要素セレクタは以下のようになります。
| 名称 | 意味 |
|---|---|
| ::after | 実際のコンテンツの後に生成される要素 |
| ::before | 実際のコンテンツの前に生成される要素 |
| ::first-letter | 最初の一文字 |
| ::first-line | 最初の1行 |
| ::selection | 選択箇所 |
具体的には、以下のように"::"を使ってセレクタを書きます。
::selection{
color: green;
}
子孫結合子セレクタ
次に説明するのが、子孫結合子セレクタです。
こちらは、祖先にある要素を指定してセレクタを作ることができます。
例えば、以下のように書いた場合は、sectionタグを祖先に持つpタグに対してスタイルを当てることができます。
section p{
color: blueviolet;
}
飽くまで"祖先にもつ"なので、階層は関係なく、以下のような場合もスタイリングが適用されます。
<section>
<h2>見出し</h2>
<div>
<p>文章</p>
</div>
</section>
ちなみに、これはHTML要素以外にも、クラスなどにも使うことができます。
子結合子セレクタ
次は、子結合子セレクタです。
こちらは、直接の親を指定したセレクタを作成できます。
例えば、以下のように書くことで、sectionタグを親に持つpタグに対してスタイルを当てることができます。
section>p{
color: blueviolet;
}
隣接兄弟結合子セレクタ
次に紹介するのが、隣接兄弟結合子セレクタです。
こちらは、同じ階層で隣接する要素に対してのセレクタになります。
以下のように書くことで、pタグに隣接するaタグに対してのセレクタを書くことができます。
p+a{
color: green;
}
一般兄弟結合子セレクタ
最後が、一般兄弟結合子セレクタです。
こちらは先ほどの隣接兄弟結合子セレクタとは違い、要素が隣接していなくてもOKです。
"+"の代わりに、"~"で書くことができます。
その他
最後に説明しておくべきことをいくつか説明していきます。
まず、セレクタを「または」の形で列挙したい場合は、以下のようにカンマ区切りで書きます。
.title2, .title3{
color: red;
}
逆に、「かつ」で指定したい場合は、スペースを空けずに記述します。
h2.title2{
color: blue;
}
こちらを理解していれば、「なぜこんな書き方になるのだろう？」といった疑問も無くなるはずです。
まとめ
今回は、CSSのセレクタについてまとめました。
こちらの記事をチートシートにして、開発の効率を高めていきましょう。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion