色々増えてるなぁ と思って調べて ついでのまとめ

もともと擬似クラスも擬似要素も : から始まっていましたが CSS3 ではわかりやすくするため :: が擬似要素で : が擬似クラスとわかれたようです
ですが 互換性のために : でも擬似要素が使えます(一部除く)

全部 : でいいのに

pseudo-elements

擬似要素
before, after だけかと思ったら first-letter なども擬似要素みたいです
本来存在しない要素を作るものかと思ってましたが そういうことではないみたいです

::after

指定した要素の内側の最後に要素を追加します
<div class="xx">
    <p></p>
    <p></p>
    <p></p>
    ::after
</div>

クラス xx に ::after を指定した場合はこの位置にあります
要素の内側というところと content プロパティ必須なのに注意です
文字がいらないなら content プロパティに空文字設定です

::before

基本は ::after と一緒ですが 要素の場所は内側の最初になります
content 必須なのと内側になるのは一緒です
<div class="xx">
    ::before
    <p></p>
    <p></p>
    <p></p>
</div>

あまり先とか後を気にせず position:absolute; をつけてデザイン用に使うことが多いです

::first-letter

最初の一文字にマッチします
最初の一文字を大きくしたり 左にマージンつけて 段落開始の一文字あけるとかできます

"「あ" とか "あ、" みたいな場合は 一文字じゃなく 2 文字になります

::first-line

最初の行にマッチします
inline 要素には使えないので注意

::selection

選択した範囲にマッチします

ドラッグで選択したら反転する色が綺麗なページが作れます

pseudo-classes

擬似クラス
特殊な要素を指定するためのセレクタ

:link

リンクに対してCSSを適用できる
:visited や :hover, :active より先に書かないと使えない面倒仕様

:visited

開いたことのあるリンク
:link のあと :active, :hover の前じゃないと(ry

:hover

要素の上にマウスカーソルがあるとき
タッチじゃ意味ない
:link, :visited のあと :active の前じゃな(ry

:active

アクティブになっている間
マウスを押している間
:link, :visited, :hover のあと つまり最後じゃ(

:focus

フォーカス当たってる時
デフォルトだとアウトラインが付いてる状態

:first-child

親から見て最初の子要素

他の条件を満たした中での最初の子というわけではないので注意
<ul>
    <li class="a">
    <li class="b">
</ul>
.a:first-child{} /* マッチ */
.b:first-child{} /* マッチなし */

:last-child

親から見て最後の子要素

:nth-child()

親から見て N 番目の子要素
N は 1 から始まる
tr:nth-child(2n + 2)
みたいに n を使った数式を書ける
n は 0 以上のすべての整数

:nth-last-child()

:nth-child の後ろから版
親から見て最後から N 番目の子要素

:first-of-type

兄弟要素の中で最初にその条件にあった要素
<div>
    <p></p>
    <span class="span"></span>
    <textarea id="text"></textarea>
    <button class="btn"></button>
</div>
p:first-of-type{}
.span:first-of-type{}
#text:first-of-type{}
button.btn:first-of-type{}

:last-of-type

兄弟要素の中で最後にその条件に合った要素

:nth-of-type()

兄弟要素の中で条件にあう N 番目の子要素
N は 1 から始まる

:nth-child と同じで n を使った式が書ける

:nth-last-of-type()

:nth-of-type の後ろから版
兄弟要素の中で条件にあう最後から N 番目の子要素

:only-child

兄弟要素が自分 1 つだけの要素
first-child と last-child を一緒につけるのと一緒
.sample:first-child:last-child{}

:only-of-type

兄弟要素の中で条件にあう要素が自分 1 つだけの要素
first-of-type と last-of-type を一緒につけるのと一緒
.sample:first-of-type:last-of-type{}

:valid

validity が true な要素
パターンに一致しているなど条件を満たせてる

:invalid

validity が false な要素
パターンに合わなかったり 必須なのに選択されていないなど

:required

required 属性が設定された必須要素

:optional

必須じゃないもの
required がついていない普通の要素

:in-range

input の number のように範囲をもつもので値が範囲内のとき

:out-of-range

:in-range の逆で範囲をもつもので値が範囲外のとき

:checked

checkbox か radio の input でチェックが付いてるもの

:disabled

disabled に設定されてる要素

:enabled

使用可能な input 系要素
disabled になってないやつ

:indeterminate

indeterminate 状態の要素
checkbox や progress で使える

:read-only

readonly の要素

:read-write

readonly じゃない要素
普通の入力可能なもの全部

:root

DOM ツリーのルートを指す
:root:root:root .tes{}
と書いて 優先度上げるテクニックもあったり

:empty

子要素がなく空の要素にマッチ

:target

ハッシュで指定した id を持つ要素
"#main" がハッシュの値になっていたら id が "main" の要素が :target にマッチする

:not()

() の中に入れたセレクタにマッチしないもの
li:not(.active){}

div:not(:first-child){}

:first

印刷するときの最初のページ
@page と使う

:left

印刷するときの左側のページ
@page と使う

:right

印刷するときの右側のページ
@page と使う

:any()

カンマ区切りの引数のどれかに一致すればマッチ

:default

デフォルトとして設定されている要素
submit ボタンはそうらしい

:fullscreen

フルスクリーンモードのとき

:scope

style タグに scoped 属性をつけるとそのタグの親要素以下が style の適用範囲になる
:scope はその基準になる scoped 付き style タグの親要素にマッチ

:dir()

文字の方向が一致すればマッチ
directory ではなく direction の略

HTML のグローバル属性 dir で文字の方向を指定できる
属性セレクタの "[]" と違って 継承や auto も判断してくれる

ltr か rtl の 2 つが選択できる

:lang()

言語がマッチすれば

lang 属性で指定する en (English), ja (Japanese), it (Italian), zh (Chinese) などを指定できる



webkit や moz などが付くものは省略してます
使えるものがバラバラで統一されてなかったです