CSSセレクタのチュートリアル

今回は実際に自分の手を動かしてみよう。

Level1から32まである。実際に解説していく。

Level1

plateを選択しろ!

つまり、plateを入力。

Level2

bentoを選択しろ!

ということで、bentoと入力する。

Level3

fancy plateを選択しろ!

ここで、fancyはIDであるため、fancyの前に#をつける必要がある。

答えは、#fancy or plate#fancy

Level4

appleを選択しろ!

ここでappleはplate内にあるため、2つとも指定する必要がある。これは親子関係である。

答えは、plate apple

Level5

pickleを選択しろ!

pickleはIDであるfancy内にある。

答えは、#fancy pickle

Level6

small apple を選択せよ!

smallはclassであるため、.smallを使う!

答えは、apple.small

Level7

small orangeを選択せよ!これはさっきと同様である。

smallはclassであるため、.smallを使う!

答えは、orange.small

Level8

bento内のsmall orangeを選択せよ!

これはさっきの応用である。

答えは、bento orange.small

Level9

plateとbentoを選択せよ!

この場合、並列の関係であるため、「 , 」を用いる。

答えは、plate, bento

Level10

すべての要素を選択する。

そのためには、Universal Selectorである* を用いる。

答えは、*

Level11

plate内のすべてを選択せよ!

Level4で学んだように、A Bとすれば良いので、

答えは、plate *

Level12

plateに隣接しているすべてのappleを選択せよ!

この場合、A + B のように入力する。

答えは、plate + apple

Level13

bento の後にあるpickleだけ選択せよ!

この時、A ~ Bを用いる。

答えは、bento ~ pickle

Level14

plateのすぐ下の要素(子要素)のみ選択せよ!

この時、A > B を用いる。

答えは、plate > apple

Level15

orange内の最初の要素のみ選択する!

その場合、:first-childを用いる。ここで:AAAAのことを擬似クラス・疑似要素と呼ぶ。

答えは、orange:first-child

Level16

plate内のappleとpickleを選択する!ここで:only-childを用いる。

:only-childとは子要素が唯一の存在だった場合に適用すること。

答えは、plate apple:only-child, plate pickle:only-child

Level17

small apple とpickleを指定せよ!

ここで、:last-childを用いる。これは、最後の子要素を選択する!

答えは、apple.small, small:last-child

Level18

3つ目のplateのみ選択せよ!

この場合、:nth-child(A)を用いる。Aに指定したい数字を入れる。

答えは、plate:nth-child(3)

Level19

1つ目のbentoを選択せよ!今回、:nth-last-child(A)を用いる。

これは最後から何番目かを指定するものである。1つ目は最後から3つ目である。(plateも含む)※セレクタで指定した要素をカウントしているわけではない!!

答えは、bento:nth-last-child(3)

Level20

最初のappleを選択しろ!今回、:first-of-typeを用いる。

これはセレクタで指定された最初の子要素を選択するものである。

答えは、apple:first-of-type

Level21

今回、2、4、6番目のplateを選択する。:nth-of-type(A)を用いる。

答えは、plate:nth-of-type(2n)

ここで(2n)とは、偶数のことである。(2,4,6)

Level22

3、5番目のplateを選択せよ!今回はlevel21と同様のSelectorを用いる。:nth-of-type(An+B) n=0,1,2・・・

0を含むことに注意!

答えは、plate:nth-of-type(2n+3)

Level23

真ん中のplateのappleを選択せよ!

ここでは、:only-of-typeを用いる。これはセレクタで指定された単独の子要素を選択するものである。

答えは、apple:only-of-type

Level24

orangeとappleの最後のみ指定せよ!今回、:last-of-typeを用いる。

答えは、orange:last-of-type, apple:last-of-type

Level25

空のbentoを選択せよ!今回、:emptyを用いる。

答えは、bento:empty

Level26

big apple のみ選択する。今回、:not(X)を用いる。

これは指定のセレクタ以外のものを選択。

答えは、apple:not(.small)

Level27

真ん中の3つを選択せよ!今回は、属性セレクタ[attribute]を用いる。

これら3つはすべてforを用いている。その為、それを指定すればいい。ここでfor属性とはラベルをコントロールと明示的に関連付けるための属性のこと。

答えは、[for]

Level28

ラベルの付いたplateを選択せよ!今回、A[attribute]を使う。

答えは、plate[for]

Level29

Vitalyを選択せよ!今回、[attribute=”value”]を用いる。

答えは、[for=”Vitaly”]

Level30

“Sa”からはじまるものを選択せよ!今回、[attribute^=”value”]をもちいる。

答えは、[for^=”Sa”]

Level31

“ato”で終わるものを選択せよ!今回、[attribute$=”value”]を用いる。

答えは、[for$=”ato”]

Level32

“obb”を含むものを選択せよ!今回、[attribute*=”value”]を用いる。

答えは、[for*=”obb”]


すべてを終えると下のように表示される。

このチュートリアルを終える頃には、CSSセレクタについて慣れる事ができるだろう。

ここで、今回用いたセレクタをまとめてみよう。

A
#A
A B
#A B
A.B
A B.C
A, B
*
A *
A + B
A ~ B
A > B

擬似セレクタ・要素
:first-child
:only-child
:last-child
:nth-child(A)
:nth-last-child(A)
:first-of-type
:nth-of-type(A)
:only-of-type
:last-of-type
:empty
:not(X)

属性セレクタ
[attribute]
A[attribute]
[attribute=”value”]
[attribute^=”value”]
[attribute$=”value”]
[attribute*=”value”]

であり、このような基本的なセレクタとその効果を覚えておこう。

最後に

これで今回の記事を終わる。

セレクタの種類は多く、覚えるのが難しいかもしれないが、慣れることのほうがより大切だと思う。だからこのようなチュートリアルこなしていこう。