CSS Diner でCSSのセレクタを学ぶ

CSSのセレクタとは

CSSのセレクトタとは、CSS(=スタイルシート)の適用範囲を決める重要な部分です。指定方法は結構あり、マスターするにはそれなりの努力が必要です。そんな努力をゲーム感覚でやってみようというのがCSS Dinerです。

CSS Diner

CSSのセレクタとは?覚えておきたい25種類と書き方

やり方はかんたんです。

ぷよぷよ動くアイテム(bento:弁当、plate:皿、Apple:りんご)などをHTMLの階層構造とみたてて、左下にあるCSS Editorにセレクタを記入して「ENTER」を押すだけです。右側は英語ですが、各Lessonで学ぶセレクターとサンプルが記載されています。

答え

案外苦労したので回答です。回答は一つではありません。できる限り、右側のサンプルを使用した回答を探してみました。

※ネタバレなのでしたの方にスクロールして見て下さい。

CSS Diner
A fun game to help you learn and practice CSS selectors.

1) plate タグ指定
2) bento タグ指定
3) #fancy id指定
4) plate apple Descendant Selector 子孫指定
5) #fancy pickle ID子孫指定 .0-
6) small クラス指定
7) orange.small タグ.クラス 指定
8) bento orange.small 子孫指定 と タグ.クラス
9) plate , bento 復数タグ指定
10) * 全部 ※ div * だと何故か無理
11) plate * タグ全部
12) plate + apple Aの次のB⇒Bが選択される
13) bento ~ pickle Aの次のB全部⇒Bが選択される
14) plate > apple A>Bの順に親子関係があるBを選択
15) plate orange:first-child Aの子供の最初のB
16) plate *:only-child (孫以下がない)子だけ
17) plate#fancy apple.small,pickle:last-child pickleとしての最後の子
18) plate:nth-child(3)
19) bento:nth-last-child(3)
20) apple:first-of-type
21) plate:nth-of-type(even)
22) plate:nth-of-type(2n+3)
23) apple.small:only-of-type
24) *.small:last-of-type
25) bento:empty
26) apple:not(.small)
27) *[for]
28) plate[for]
29) bento[for=”Vitaly”]
30) *[for^=”S”] “S”で始まる
31)*[for$=”to”] ”to”で終わる
32)*[for*=”bb”] ”bb”を含む

タイトルとURLをコピーしました