今日は、ゲーム感覚でCSSのセレクタが学べるCSS Diner - Where we feast on CSS Selectors!を紹介します。

もともと、CSSのセレクタがちょっとあやふやな人はやってみて！ 楽しみながらCSSのセレクタを学ぶ -CSS Diner | コリスで見つけたものですが、面白いのでここでも紹介します。

やりかたは簡単、セレクタを打ち込んでEnter

正解なら次のLevelに進みます。

全部で26のレベルがあり、最後のほうは考えさせられます。

また、視覚的な分かりやすさがあります。

個人的には、CSS3で追加された:nth-of-type(n)や:not()について勉強になりました。

参考にしたもの
CSS Diner - Where we feast on CSS Selectors!
CSSのセレクタがちょっとあやふやな人はやってみて！ 楽しみながらCSSのセレクタを学ぶ -CSS Diner | コリス