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

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

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

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

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

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

子孫要素

div p{
  color: #999;
}

point

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

直下の子要素

div > p{
  color: #999;
}

point

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

兄弟要素

h3~a{
  color: #999;
}

point

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

隣の要素

h3+a{
  color: #999;
}

point

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

最初の子要素

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

point

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

最後の子要素

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

point

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

〇〇番目の子要素

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

point

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

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

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

point

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

奇数の子要素

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

point

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

偶数の子要素

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

point

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

倍数の子要素

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

point

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

3列の真ん中

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

point

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

属性で指定

p[class]{
  color: #999;
}

point

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

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

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

point

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

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

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

point

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

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

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

point

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

文章の一行目

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

point

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

一文字目

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

point

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

全ての要素

*{
  color: #999;
}

point

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

〇〇以外の要素

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

point

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

要素が空の時

ul:empty{
  display:none
}

point

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

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

h2::before{
  content:'前に追加 > ';
}

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

見出し

point

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

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

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

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

point

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