14日目。二週間。ようやったなぁ私。
さて今日は動画「2-6 疑似要素」と「2-7 構造的な疑似要素」をやりました。セレクタの勉強はこれでひと段落といったところでしょうか。本当はもちょっとやるつもりだったのが、プログラミングの勉強を始めてから一番悩まされたので、めっちゃ時間と体力使いました。疲れた…
勉強したこと
・疑似要素＝指定した要素に対してスタイルを適用できる
スタイルを適用させたい要素の前にコロン「：」をつける
:link まだ訪問していないリンク
:visited 訪問済みのリンク
:hover カーソルをのっけたときの反応
:focus tabキーで選択したときの反応
・構造的な疑似要素
:first-child 最初の子要素
:last-child 最後の子要素
:only-child 唯一の子要素
「2-6 疑似要素」はね、サクサクいけたんですよ。問題は「構造的な疑似要素」とやらで、何につまずいたかって、動画と一言一句同じコード書いてるはずなのに同じ表示にならないんですよ。
左の画面「The first chile of ul.」の背景色を青にしたいんですけど、ならず。いろいろいじくった結果
コロン「：」と「first-child」の間をベタにしたら適用されました。あーそーなのー。アキも何かしらの影響を及ぼすんですね。なんか、しばらく悩んだ結果が半角アキの有無って、むなしい…
んでこれで終わったら良かったんですけどね、今日一番の試練はここからでした。
↑にするのにどれだけ時間かかったか！動画と同じコード書いてるのに、ブラウザ全体の背景に色が適用されちゃって、サーーッパシわからなかったんですよ。何っ回も確認したのに同じコードだし。
動画だとコメントの下の行（21行目）は
:only-child {
だけで、音声でも「bodyタグ内の唯一の要素に適用される」と言ってたんですが、「bodyって指定しないと適用されないのでは？」と思って、コロンの前に「body」と入れたら当たりでした。かしこ。
ググったら私と同じことで悩んでる人いました。
解答に「仕様上はhtml要素にも反映される」とあるので、やっぱそうだったんですね。だとしたらなぜ動画だとあのコードでうまくいくんだ…まぁわかったからいいけど…
このonly-child、body内に唯一ある子要素がいくつかあったらどこに適用されるのか、いまいちわからないんですよね。
例えばコレ。「body内の唯一の子要素の背景色を赤に」と指定したら、bタグで囲まれた部分に適用されました。でもh1も唯一の子要素なんだけどな…
気になることはありますが、もう今日は疲れたので寝ます。ゲームしたいし本も読みたいし。今こそ「無理せずゆるく取り組んだらどんな結果が出るか知るため」という目的に沿った行動をします。ラクするためなら迷わない。
