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

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

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

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

CSS selectors cheatsheet

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

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

サイトのキャプチャ

CSS selectors cheatsheet Game

記述されているセレクタがどの要素か選択します。
右上のスイッチ(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経由なので、メール登録など面倒なことは一切無しでダウンロードできます。

サイトのキャプチャ

CSS selectors cheatsheet

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

チートシートのキャプチャ

チートシートの一部

sponsors

top of page

©2024 coliss