21. CSS Diner — Where we feast on CSS Selectors!

【所要時間】

1時間8分(2018年7月19日)

【概要】

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

【要約・学んだこと】

4/32: plate apple{ で、plate elementの中のapple element

7/32 : orange.small{ で、orange elementかつsmallクラス

8/32: bento orange.small{ bento elementの中でorange elementかつsmallクラス

11/32: plate *{ で、 plate elementの中全てを選択する。

12/32: plate + apple{ plateの直後のappleを選択する。

13/32: bento~pickle{ bento element以降のpickle elementを全て選択する。

14/32: plate>apple{ plate elementの直接の子elementがappleであるものを選択する。

15/32: orange:first-child{ でelement orangeの最初の子のみ選択する。

16/32: apple, plate pickle:only-child{ でapple elementと、plateの子elementのpickle elementとのみを選ぶ。

17 : .small: last-child

18: plate:nth-child(3)

19:bento:nth-last-child(3){ bento elementの後ろから3番目を選ぶ。

<div class=”table”>
 <plate />
 <bento />
 <plate>
  <orange />
  <orange />
  <orange />
 </plate>
 <bento />
</div>
bento:nth-last-child(3)

このとき :nth-last-child(3)だと、bento elementの後ろから3番目、orange elementの後ろから3番目が該当するが、 :nth-last-child(4) だと、後ろから4番目に該当するのがplate elementしかないため、最初のplate elementが選ばれる。

20: apple:first-of-type

21: plate:nth-of-type(even) または
plate:nth-of-type(2), plate:nth-of-type(4), plate:nth-of-type(6)でもよい。
奇数は(odd)

22: plate:nth-of-type(2n+3)

23: plate .small:only-of-type

24: .small:last-of-type

25: bento:empty

26: apple:not(.small)

27: [for]

28: plate[for]

29: [for=”Vitaly”]

30: [for^=”Sa”]

31: [for$=”to”]

32: [for*=”ob”]

【わからなかったこと】

12/32のA + B が、A直後のBを選択で、13/32では A~B が解説通り Aの後に続くB全て、と解釈するのに時間がかかった。A以降からBの手前までという風に考えてしまったが、兄弟を選択するという意味で考えればわかりやすい。

【感想】

昨日一、昨日やったことをすでに結構忘れていた。