CSS セレクタの使い方がまとめられたチートシート -CSS selectors cheatsheet
Post on:2019年4月5日
CSSのセレクタがいまいち、という人にお勧めです!
セレクタの使い方が分かりやすくまとめられたPDFのチートシートを紹介します。
このチートシートは通常のチートシートだけでなく、ゲーム版もあり、CSSのセレクタをどれくらい知っているか確認することもできます。
CSSのセレクタをどれくらい理解しているかゲーム
チートシートのダウンロードの前に、このチートシートはゲームも用意されています。
記述されているセレクタがどの要素か選択します。
右上のスイッチ(gameとanswer)で問題と答えが切り替えられます。
最初の問題は、「a { }」「#a { }」のように簡単です。
正解するとグリーンになり、間違えるとプルプルしますw
最初は簡単
「b:nth-child(2) { }」「a:nth-last-child(2) { }」「a :last-of-type { }」など、だんだん難しくなります。
CSSセレクタのゲーム
「a:empty { }」「a:not(.x) { }」「a[for=“x”] { }」など、後半は知らない人にはかなり難しいと思います。
CSSセレクタのゲーム
参考: CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方
CSSセレクタチートシートのダウンロード
CSSセレクタチートシートのダウンロードは、下記ページから。
ページのちょい下「Go to download the CSS selectors cheatsheet」をクリック。
Dropbox経由なので、メール登録など面倒なことは一切無しでダウンロードできます。
ダウンロードしたチートシートはこんな感じです。
デザインも洗練されていて、具体的なコードも書かれているので分かりやすいですね。
チートシートの一部
sponsors