CSSセレクタのチートシート

CSSのセレクタのチートシートです。コードはコピペできるようになっています。詳しいコードの使い方は「あなたはいくつ知ってる?CSSのセレクタ40個を総まとめ」をご覧ください。
記載の内容の不備やセレクタ追加のご要望は(@webliker_info)までご連絡お願い致します。

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

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

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

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

子孫要素

div p{
  color: #999;
}

point

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

02

直下の子要素

div > p{
  color: #999;
}

point

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

03

兄弟要素

h3~a{
  color: #999;
}

point

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

04

隣の要素

h3+a{
  color: #999;
}

point

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

05

最初の子要素

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

point

その要素の中で最初にでてくる子要素。

06

最後の子要素

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

point

その要素の中で最後にでてくる子要素。

07

〇〇番目の子要素

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

point

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

08

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

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

point

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

09

奇数の子要素

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

point

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

10

偶数の子要素

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

point

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

11

倍数の子要素

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

point

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

12

3列の真ん中

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

point

3列の真ん中の要素だけを指定したい場合は3n-1。つまり3の倍数の1つ前の要素

13

属性で指定

p[class]{
  color: #999;
}

point

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

14

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

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

point

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

15

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

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

point

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

16

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

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

point

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

17

文章の一行目

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

point

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

18

一文字目

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

point

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

19

全ての要素

*{
  color: #999;
}

point

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

全ての要素
20

〇〇以外の要素

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

point

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

21

要素が空の時

ul:empty{
  display:none
}

point

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

22

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

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

見出し

point

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

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

23

フォーム関連のセレクタ

テキストフィールド

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"]{}
24

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

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

point

「:target」はページ内リンク先の要素に対してクリック後のCSSを適用することができる。例では「href=”#modal”」となっているaタグをクリックすることで、リンク先である「div#modal」が表示される指定。
これを使えばjsを使わず様々なクリックイベントの処理をすることができる。