oshushichangのブログ

プログラマになるため、勉強した内容を日報として家庭用esaに記録し、旦那からFBを貰っている日々を綴っています。

0704日報

日報

やったこと

やったこと ないよう さんこう
CSS 課題

こまったこと・わかったこと

CSS 課題の進め方(備忘録として)

nth-child の使い方

.global-nav__items :nth-child(2n) {
  background-color: #aaaaaa;
}

.global-nav__items :nth-child(2n+1) {
  background-color: #cecece;
}

f:id:oshushichang:20180712182917p:plain

  • 以上のようなコードを書いたところ、偶数のナビゲーションの文字の後ろが奇数の背景色と同一色になってしまった。切り分けの結果問題点は以下の2箇所であることが判明。
    • .global-nav__items : 子要素に対してnth-child を扱うので、.global-nav__item とする。
    • .global-nav__item:nth-child(2n) : 要素を繋げるときに:をスペースを空けずに書く。
  • 以上を踏まえて下記のコードで直った。
.global-nav__item:nth-child(2n) {
  background-color: #aaaaaa;
}

.global-nav__item:nth-child(2n+1) {
  background-color: #cecece;
}

f:id:oshushichang:20180712183001p:plain

参考にしたサイト

ひとこと

  • floatをやめてflexboxに変更できるところはとりあえず変更した!残りはあした。

旦那より

floatをやめてflexboxに変更できるところはとりあえず変更した!

2018年!

今日のまとめ

  • flexboxはちょうべんり・・・・