🔖

gridレイアウトでカレンダーのデザイン(html / sass)

2024/03/05に公開

(0.5x が綺麗に見えます)

土曜日・日曜日のみ日付の色を変更する

span{
  // 7の倍数のみ色を青にする
  &:nth-child(7n){
    color: blue;
  }
  // 7の倍数+1のみ色を青にする
  &:nth-child(7n+1){
    color: red;
  }
}

空要素ではない要素を指定し、さらに特定のクラスがついていないものにhover処理をつける

&:not(:empty){    //空要素ではない(:blankでも可)
  border: 2px solid #ccc;
  &:not(.full):hover{    //fullクラスが付いていないものにhover処理
    background-color: #FEE104;
  }
}
GitHubで編集を提案

Discussion