CSS Diner

ゲーム感覚でCSSセレクタを学べるサイトです。
アウトプットによる学習の反復と備忘を目的とし残していきます。

タイプセレクタ　（Level 1~2 of 32）

一番シンプルなセレクタ

a/span/divなど全タグ

div {color:red;}
p {color:red;}
span {color:red;}
div.classname {color:red;}

IDセレクタ　（Level 3 of 32）

HTML上でID=""と定義されているセレクタ
詳細度が高めなので、セクション別で用いられることが多い。

例

# id1 {color:red;}
# id2 {color:red;}
# id3 {color:red;}

子孫セレクタ　（Level 4~5 of 32）

親要素に内包する子要素を取得できるセレクタ
クラス・IDなど様々なセレクタと組み合わせて用いられる。

例

h1 div {color:red;}
.classname div {color:red;}
# id .classname {color:red;}
ul li {color:red;}

クラスセレクタ　（Level 6~7 of 32）

HTML上でclass=""と定義されているセレクタ
タイプセレクタより詳細度が高く、IDセレクタより低い。

例

.classname {color:red;}
p.classname {color:red;}
div.classname {color:red;}

子孫セレクタ＋クラスセレクタ　（Level 8 of 32）

子孫関係のクラスセレクタを取得
地味にタイプセレクタも絡んでいる。

例

div h2.classname {color:red;}
ul li.classname {color:red;}
div span.classname {color:red;}

複数セレクタ　（Level 9 of 32）

カンマで複数取得できる方法
クラス・IDももちろん取得可

例

div,p {color:red;}
# id,div {color:red;}
.classname,div {color:red;}
# id,.classname {color:red;}

全称セレクタ　（Level 10 of 32）

全タグを取得できるセレクタ
リセットCSSなどに用いられる。

例

* {color:red;}

子孫セレクタ＋全称セレクタ　（Level 11 of 32）

子孫セレクタの全称セレクタも取得できる。

例

div * {color:red;}
section * {color:red;}
.classname * {color:red;}
# id * {color:red;}

隣接兄弟結合子　（Level 12 of 32）

1つ目の要素の直後にある2つ目の要素を取得できるセレクタ

例

div + .classname {color:red;}
div + span {color:red;}
h1 + .classname {color:red;}

一般兄弟結合子　（Level 13 of 32）

1つ目の要素の後にある2つ目からの要素を取得できるセレクタ
（直後でなくても取得できる。）

例

div ~ h2 {color:red;}
.classname ~ span {color:red;}
h1 ~ .classname {color:red;}

子セレクタ　（Level 14 of 32）

親に対して直下の要素を指定するセレクタ
※子孫セレクタとの違いは親要素配下の子タグを全て取得するか
直下の子要素だけを取得するかの違い。

例

div > span {color:red;}
section > .classname {color:red;}

:first-child セレクタ　（Level 15 of 32）

兄弟要素の一番目の要素を取得するセレクタ

例

p:first-child {color:red;}
.classname:first-child {color:red;}

:only-child セレクタ　（Level 16 of 32）

兄弟要素がない全てのセレクタを取得

例

p:only-child {color:red;}
.classname:only-child {color:red;}

:last-child セレクタ　（Level 17 of 32）

兄弟要素のグループの中で最後の要素

例

p:last-child {color:red;}
.classname:last-child {color:red;}

:nth-child セレクタ　（Level 18 of 32）

兄弟要素のグループの中でn番目を指定できるセレクタ

例

p:nth-child(3n) {color:red;}
.classname:nth(2n) {color:red;}

:nth-last-child セレクタ　（Level 19 of 32）

兄弟要素のグループの中で後ろからn番目を指定できるセレクタ

例

p:nth-last-child(3n) {color:red;}
.classname:nth-last-child(2n) {color:red;}

:first-of-type セレクタ　（Level 20 of 32）

兄弟要素中の各種類の一番目の要素を取得できるセレクタ

例

p:first-of-type {color:red;}
.classname:first-of-type {color:red;}

:nth-of-type セレクタ　（Level 21~22 of 32）

兄弟要素のグループの中でn番目毎を取得できるセレクタ
n番目から数字をプラスさせることも可能

例

p:nth-of-type(3n) {color:red;}
.classname:nth-of-type(2n) {color:red;}
p:nth-of-type(2n+3) {color:red;}
.classname:nth-of-type(2n+2) {color:red;}

:only-of-type セレクタ　（Level 23 of 32）

兄弟要素がない全てのセレクタを取得
※:only-childとの違いは、別の兄弟要素がないタグが同じグループ内に存在してるかどうか、
フループ内に存在している場合、only-childは機能しない。

例

p:only-of-type {color:red;}
div p.classname:only-of-type {color:red;}

:last-of-type セレクタ　（Level 24 of 32）

兄弟要素のグループ中の最後のセレクタ

例

p:only-of-type {color:red;}
div p.classname:only-of-type {color:red;}

:empty セレクタ　（Level 25 of 32）

子要素のない空要素を取得するセレクタ

例

:empty {color:red;}
div:empty {color:red;}

:not() セレクタ　（Level 26 of 32）

()内の引数に一致しないセレクタを取得

例

div:not(.classname) {color:red;}
:not(p) {color:red;}

属性セレクタ　（Level 27~28 of 32）

属性セレクタについて
以下より例としてfor=""で定義していますが
title=""やread=""など任意の値でセットしても大丈夫です。

[attribute]を取得するセレクタ
HTML上でfor=""と定義されているセレクタ

例

[for] {color:red;}
div[for] {color:red;}
div [for] {color:red;}

属性セレクタ(for="value")　（Level 29 of 32）

HTML上でfor=""と定義されているセレクタの定義名を取得する

例

[for="forname"] {color:red;}

属性セレクタ[for^="value"]　（Level 30 of 32）

HTML上でfor=""と定義されているセレクタの定義名の頭文字を取得する

例

[for^="f"] {color:red;}
[for^="s"] {color:red;}

属性セレクタ[for$="value"]　（Level 31 of 32）

HTML上でfor=""と定義されているセレクタの定義名の語尾を取得する

例

[for$="o"] {color:red;}
[for$="a"] {color:red;}

属性セレクタ[for*="value"]　（Level 32 of 32）

value内の文字を含むforを取得する

例

[for*="ll"] {color:red;}
[for*="bb"] {color:red;}

やってみた感想

似たようなセレクタの違いを理解するのが難しかった。

詳細度だったり、親要素に含む子要素の状況によってセレクタを使い分ける必要があり
まずは実践を通してお試しで使っていきたいと思った。

大規模なサイトになるほど、HTMLも複雑化してくるので
今回の学びを活かし、適切にセレクタを振っていきたい。