KAKERU TOOLS ─ 無料・登録なし
擬似クラス チェッカー:nth-child や :last-child が「どこを選ぶか」を、図でその場で確かめる。書き方を変えると、選ばれる場所がすぐ変わります。
無料で使える登録・インストール不要スマホでもOK
li
上の欄に直接書いても、すぐ図に反映されます（例：:nth-child(3n+2)）。図は、このブラウザが実際に CSS で選んだ結果です。
図の設定数や並び方を変えて確かめる
並べる数
1行に並べる
中身
コピペ用のコード
「n」には 0, 1, 2, 3… が順に入ります。2n+1 なら 1, 3, 5…（奇数）。-n+3 なら 3, 2, 1（最初の3つ）です。
1
よく使う形を選ぶ
「最初」「最後」「奇数」「3つごと」など。直接書いてもOK。
2
図で、選ばれる場所を確かめる
数や1行の並びを変えて、思ったとおりに選ばれるかを見られます。
3
コードをコピーして貼る
CSSとHTMLのひな形をコピー。AIに頼むときの言い方も出せます。
Use casesこんなときに使う
Learnしくみを知りたい人へ（WEB技術の記事）
ABOUT ─ この道具について
KAKERUデザインが作りました。WEBとデザインの仕事を20年以上続けてきた中で「あったら便利」と思ったものを、無料の道具にしています。サイト制作やWEBまわりのご相談もどうぞ。