CSS セレクタの使い方がまとめられたチートシート -CSS selectors cheatsheet

Post on:2019年4月5日

sponsors

CSSのセレクタがいまいち、という人にお勧めです！
セレクタの使い方が分かりやすくまとめられたPDFのチートシートを紹介します。

このチートシートは通常のチートシートだけでなく、ゲーム版もあり、CSSのセレクタをどれくらい知っているか確認することもできます。

CSSのセレクタをどれくらい理解しているかゲーム

チートシートのダウンロードの前に、このチートシートはゲームも用意されています。

記述されているセレクタがどの要素か選択します。
右上のスイッチ（gameとanswer）で問題と答えが切り替えられます。

最初の問題は、「a { }」「#a { }」のように簡単です。
正解するとグリーンになり、間違えるとプルプルしますｗ

最初は簡単

「b:nth-child(2) { }」「a:nth-last-child(2) { }」「a :last-of-type { }」など、だんだん難しくなります。

CSSセレクタのゲーム

「a:empty { }」「a:not(.x) { }」「a[for=“x”] { }」など、後半は知らない人にはかなり難しいと思います。

CSSセレクタのゲーム

CSSセレクタチートシートのダウンロードは、下記ページから。
ページのちょい下「Go to download the CSS selectors cheatsheet」をクリック。
Dropbox経由なので、メール登録など面倒なことは一切無しでダウンロードできます。

ダウンロードしたチートシートはこんな感じです。
デザインも洗練されていて、具体的なコードも書かれているので分かりやすいですね。

チートシートの一部