CSSセレクタのチートシート｜37パターンを一覧で解説

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

[vlxst1224]

コレが印刷された下敷きとかクリアファイルあったらほしい。義務教育時代にあったらよかった（義務教育時代にCSSなんて使わねえだろ

[nakayuki805]

朝見たときはスマホで拡大できなかったけど今はスマホですごく見やすくなっていて嬉しい

[yoshi-na]

いままでまとめは数あれど、俺が見た中では最高に見やすく分かりやすいので、初学の方はこれ見とけ

[abababababababa]

結構細かいことできるんですなぁ…！下敷き、クリアファイル、作ってくれたら学校単位で買うところ多そう。

[tym1101]

図だととてもイメージしやすく分かりやすい

[raimon49]

力作で分かり易い。正規表現みたいに属性値の先頭と終わりをマッチさせられるの知らなかった。

[Keisuke69]

これ便利だ。要素の指定の仕方とか知らないのも結構あった

[pekeq]

これは直感的でいいな

[t_43z]

[css][Tips][cheatsheet]

[tbzsantaroh]

わかりやすいCSSセレクタ一覧

[yamadar]

視覚的でわかりやすい

[securecat]

01の図は、むしろ02につかうべきなのでは

[d4-1977]

とてもよくまとめられてる！

[ino-agile]

これ、見易くていいですね

[hokorobi]

知らないのが多かった

[kei_0000]

後で試す

[mippai]

これよ

[light940]

分かりやすい！

[webooker]

知らんのあった…

[yhonda1001]

css

[yaminusi]

内容の正確性とか確認する前にまず「何でこのフォント選んじゃったの」という思いで一杯になるのは私のデザインセンスの無さ故か。

[k-umewin]

CSS

[akiramaz]

すごい見やすいデザインで感心

[kinushu]

これはわかりやすい

[hagenama]

これ助かる！いい！

[teruringo]

-childと-of-typeの違いが書いてないからやり直し

[a-yoshinaga0314]

見よう

[kosn]

(12)でいきなりソースじゃなくて"3列で表示した場合の図"になっててわかりにくいと思う

[syari3]

メモ

[punychan]

拡大できないのはブラウザのモバイルサイトモードのとき。ChromeもFirefoxも。

[gerres72]

いいね。

[deokisikun]

素敵！

[astrocyte]

flexboxのチートシートもよろしく！