「やる気なくなってきた」とか言いながら勉強続けてますよ。えらくないですか？私はとてもえらいと思います。
今日から「レスポンシブサイトを作る」というステップに入りまーす。しんどそー！
まずは動画を見るとのことなので、テックアカデミーさんの動画を見始めました。
HTMLとCSSを勉強したときと同じですね。動画を見ながら実際にコードを書いて学ぶの繰り返しです。今日は「1-1 構造的な疑似要素の応用」と「1-2 構造的で特殊な疑似要素」の2本を見ました。
勉強したこと
・nth-child(☆)：☆番目の要素に適用させる
・nth-last-child(☆)：最後から☆番目の要素に適用させる
・nth-of-type(☆)：特定の子要素に適用させる
・only-of-type：唯一の子要素に適用させる
HTMLとCSS一通り勉強したということで、まずは動画内に表示された画面を自力で作ってみるところからスタート。
もうリストは散々やり直したのでさすがに覚えました。かかってこいよリスト！
そうしてでき上がったのがコチラ。余白とかはおいといて、まぁまぁいーんでないでしょうか。一番上のピリオドを忘れてるのはスルーしてください。
これやってて気づいたんですけどCSSの勉強いまいち楽しくなかったの、余白の設定どうしたらいいか、ようわからんからなんですよね。数字入力→画面確認→数字修正、がだるすぎて。なので今回もめっちゃテキトーに入力しました。そんなもんでいんですよ。
nth-child(2n)＝上から2番目の要素に適用させるってことだそうで。「2n」って出てきたとき「なつかしっ…！！」って叫びそうになりました。まさか数学の知識が役立つときがくるとは！
「2n」と逆にしたいときは、いわずもがな「2n+1」。覚えてるの、自分でもわりと奇跡だと思います。
(-n+☆)で☆より前の要素に適用できる。これ忘れそう。頭弱いから。
nth-last-childだと「最後から☆番目」になるので、nth-childのときと逆になっています。
5番目と6番目の間にpタグをはさんだ状態でのnth-child(2n)。nth-childは隣接している要素に適用されるとのことなので、6番目のリストから「上から2番目」が適用されていますね。説明下手だな！
nth-of-typeだと、隣接していない要素にも適用されるそうです。とかいってるけど正直意味よくわかってないので、
nth-child：隣接している要素ごとに適用される
nth-of-type：特定の要素まるごとに適用される
って覚えてます。
テックアカデミーさんの動画は全部で19本。結構多いけど、HTMLとCSSよりは本数少ないので、あまり負担には思っていません。
今日久々に動画見ながら手動かしてみたんですけど、やっぱ手動かす方が楽しいですね。デベロッパーツールも便利だし、入力した瞬間にどうなるか見れるからラクだけど、こうやってちまちまコード打つのが私は好きです（非効率なんだろうけど）。
