css-selector-cheat-sheetCSSセレクタのチートシート|37パターンを一覧で解説

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

セレクタの概要をおさらい

CSSの3つの要素

cssの記述は

  • ①セレクタ(どの要素?)
  • ②プロパティ(なにを?)
  • ③値(どんな風に?)

の3つの要素でできている。

よく使う超基本のセレクタ

p{~}タグ名で指定
.className{~}class名で指定
#idName{~}id名で指定
p, div, .class{~}複数要素に同じ指定

リンクで使用するセレクタ

a:link{~}未訪問のリンク
a:visited{~}訪問済みのリンク
a:hover{~}ホバー状態のリンク
a:active{~}クリック状態のリンク

子孫要素

div p{
  color: #999;
}

階層の深い子要素(孫)もセレクタの対象になる。

CSSセレクタの〇〇の中の子要素のサンプル

直下の子要素

div > p{
  color: #999;
}

1つ下の階層の子要素だけが対象となり、孫要素は対象外。
※直下とは真下の意味ではない

CSSセレクタの直下の子要素のサンプル

兄弟要素

h3~p{
  color: #999;
}

指定した要素より後にでてくる同じ階層の要素が対象。

CSSセレクタの〇〇以降の兄弟要素のサンプル

隣の要素

h3+p{
  color: #999;
}

その要素の後ろ隣にある要素をセレクタにする。
※完全に隣の要素じゃないと機能しない

CSSセレクタの後ろ隣の兄弟要素のサンプル

兄弟要素の最初の要素

.box p:first-child{
  color: #999;
}

指定した要素が最初の子要素なら選択。最初に出てきた〇〇ではなく、指定した要素が最初の子要素である場合しか適用されないので注意

CSSセレクタの兄弟要素の最初の子要素のサンプル

兄弟要素の最後の要素

.box p:last-child{
  color: #999;
}

指定した要素が最後の子要素なら選択される。最後にある〇〇ではなく、指定した要素が最後の子要素である場合しか適用されないので注意

CSSセレクタの兄弟要素の最後の子要素のサンプル

兄弟要素がない要素

p:only-child{
  color: #999;
}

指定した要素に兄弟要素がない場合に適用される。1つでも他に兄弟要素があると適用されないので注意

CSSセレクタ兄弟要素がない要素のサンプル

最初の子要素

p:first-of-type{
  color: #999;
}

その要素の中で最初にでてくる子要素。指定したい要素がピンポイントの場合はfirst-childよりもこちらの利用がおすすめ

CSSセレクタ最初の子要素のサンプル

最後の子要素

p:last-of-type{
  color: #999;
}

その要素の中で最後にでてくる子要素。指定したい要素がピンポイントの場合はlast-childよりもこちらの利用がおすすめ

CSSセレクタ最後の子要素のサンプル

兄弟要素で要素が1つの時

p:only-child{
  color: #999;
}

指定した要素と同じ要素が兄弟要素がない場合に適用。他に兄弟がいても1つであれば適用される

CSSセレクタの兄弟要素に特定の要素しかない場合のサンプル

〇〇番目の子要素

p:nth-of-type(2){
  color: #999;
}

(n)の箇所には1〜の好きな数字を半角で入力する。もちろん(1)とすれば最初の要素。

CSSセレクタのn番目の子要素のサンプル

後ろから〇〇番目の子要素

p:nth-last-of-type(2){
  color: #999;
}

(n)の箇所には1〜の好きな数字を半角で入力する。もちろん(1)とすれば最後の要素。

CSSセレクタの後ろからn番目の子要素のサンプル

奇数の子要素

p:nth-of-type(odd){
  color: #999;
}

(数字)を入れる箇所に、oddと記入で奇数番号の要素をセレクタにできる。

CSSセレクタの奇数番号の子要素のサンプル

偶数の子要素

p:nth-of-type(even){
  color: #999;
}

(数字)を入れる箇所に、evenと記入で偶数番号の要素をセレクタにできる。

CSSセレクタの偶数番号の子要素のサンプル

倍数の子要素

p:nth-of-type(3n){
  color: #999;
}

(数字)に◯nと書くことで特定の倍数の番号にある要素をセレクタにできる。

CSSセレクタの特定の倍数番号の子要素のサンプル

3列の真ん中

li:nth-of-type(3n-1){
  color: #999;
}

3列の真ん中の要素だけを指定したい場合は(3n-1)と記述する
つまり3の倍数の1つ前の要素

CSSセレクタの3列の真ん中だけを指定するサンプル

属性で指定

p[class]{
  color: #999;
}

[class]や[href][src]など指定した属性を持つ要素をセレクタにする。

CSSセレクタの特定の属性を持つ要素のサンプル

属性内容の“一部”が一致する要素

p[class*="ttl"]{
  color: #999;
}

属性の内容の一部が一致していれば選択される。
例は["ttl"]という文字が含まれていればセレクタ。

CSSセレクタの属性の一部が一致する要素のサンプル

属性内容の“始め”が一致する要素

p[class^="ttl"]{
  color: #999;
}

属性の内容の始まりが一致していれば選択される。
例は["ttl"]という文字から始まっていればセレクタ。

CSSセレクタの属性の初めが一致する要素のサンプル

属性内容の“最後”が一致する要素

p[class$="one"]{
  color: #999;
}

属性の内容の終わりが一致していれば選択される。
例は["one"]という文字で終わっていればセレクタ。

CSSセレクタの属性の最後が一致する要素のサンプル

文章の一行目

p::first-line{
  color: #999;
}

文章の一行目に対してCSSを適用する。改行された文章は対象外となる(※ブロック要素だけ)

CSSセレクタの文章の一行目のサンプル

一文字目

p::first-letter{
  color: #999;
}

文章の一文字目に対してCSSを適用する。(※ブロック要素だけ)

CSSセレクタの文章の一文字目のサンプル

〇〇以外の要素

p:not(.text){
  color: #999;
}

not(条件)を書くことでそれ以外の要素を選択する。例ではclass名が[.text]以外の[p]がセレクタになる。

CSSセレクタの〇〇以外の要素のサンプル

要素が空の時

ul:empty{
  display:none
}

要素の中身が空っぽの要素に対してCSSを適用できる。

CSSセレクタの中身が空の要素サンプル

全ての要素

*{
  color: #999;
}

HTMLに書かれた全ての要素をセレクタにする

CSSセレクタの全ての要素のサンプル

最上位の親要素

:root{
  --color-text: #333;
  --mgn-text: 1.5em;
}
/*呼び出す時*/
.text{ 
  color : var(--color-text);
  margin : var(--mgn-text);
}

文書構造の最上位の要素(≒html要素)であるルート要素への指定。指定としてはhtmlとほぼ一緒。CSS変数を定義する時に活用することが多い。

CSSセレクタの:root要素のサンプル

before/afterで要素の前後に追加

h2::before{
  content:'前に追加 > ';
}
h2::after{
  content:' < 後ろに追加';
}

これはサンプルです見出し

before / afterでそれぞれ要素の前後に[擬似要素]を追加することができる。その要素の入れ子として前後にタグを追加するイメージ。

これらを使うことで前後にアイコンを追加したり、吹き出しの三角を表示したりするなどCSSでの表現の幅を広げることが可能。

ちなみに擬似セレクタの「:」とbeforeとafterの擬似要素の「::」は区別をつけるためにコロンの数が定められている。

CSSセレクタの要素の前後に疑似要素を追加するサンプル

フォーム関連のセレクタ

テキストフィールド

input[type="text"]{border:1px}

テキストエリア

textarea{border:1px}

セレクトボックス

select{border:1px}

チェックボックス

input[type="checkbox"]{}

ラジオボタン

input[type="radio"]{}

checkboxとradioのチェック状態

input[type="checkbox"]:checked{}
input[type="radio"]:checked{}

送信ボタン

input[type="submit"]{}
CSSセレクタのform関連のサンプル

「:target」でページ内リンク先をセレクタに

#modal{
  display: none;/*クリック前のcss*/
}
#modal:target{
  display: block;/*クリック後のcss*/
}

「:target」はページ内リンク先の要素に対してクリック後のCSSを適用することができる。例では「href=”#modal”」となっているaタグをクリックすることで、リンク先である「div#modal」が表示される指定。
これを使えばjsを使わずにクリック時のDOMの操作がいくつか可能

CSSセレクタのtarget属性のサンプル