CSS勉強メモ 属性の指定方法

<section id="about">
      <h1 id="main" class="title box" style="color: skyblue;">Main</h1>
</section>
/* <h1>の指定方法 */
#about > #main.title{ color: pink;}
h1 { color: red !important;}
/* important>直接スタイルを書き込む>属性ランキングの順で適用される */
h1#main.box { color: yellow;}
section > #main.title { color: blue}
section#about > h1 {color: green;}

/* 全て書いた場合は[id],[class,属性,擬似クラス],[要素，擬似要素]の数で評価されて、前から値が大きいものが選ばれていき、同点の場合は後に書いた方でスタイルが決まる */

li:empty{
  background: skyblue;
}
li:not(:empty){
  background: skyblue;
}

main > h2:first-of-type{
  background: pink;
}
main > h2:last-of-type{
  background: pink;
}
main > h2:nth-of-type(3){
  background: pink;
} 
/* 指定する要素の〜番目にスタイルをつける */
/* 要素の種類も考慮したい時はnth-of-type */

h1::before,
h2::before{
  content: '- ';
}
h1::after,
h2::after{
  content: attr(data-subtitle);
}
.btn{
  width: 100px;
  background: skyblue;
  text-align: center;
  padding: 4px;
  color: white;
}
.btn:hover{
  opacity: 0.7;
  cursor: pointer;
  擬似クラスはカーソルが当たったときに適用されるクラス
}

main > :nth-child(3){
  background: pink;
} */
main > :nth-child(3n){
  nは自然数を入れてくれる
  background: pink; 
}

main > :nth-child(odd){
  background: pink;
}
main > :nth-child(even){
  background-color: skyblue;
}

main > :first-child{
  background: pink;
}
main > :last-child{
  background: skyblue;
}