セレクター

種類

・要素型
1class(.)(-,_,英数字使える。数字から始めてはいけない)(共通のクラスを半角スペースで追加できる)

 <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>

2id(#)(一つのページに一つ)
3属性(typeとか)
→完全一致(=)、前方一致(^=)、後方一致($=)、部分一致(=)
[属性＝"属性名"]
4全称( ,書いてある全てを選択する。*{})

組み合わせ

1a,b
(セレクターを複数、「または」という意味、個々に指定できる、改行する、２種類以上)
2ab
(二つの要件を満たすもの,繋げる、「なおかつ」と言う意味(dic.box)、１種類OR全ての要素)
3a > b
(子要素を選択する)
4a b
(子孫要素を選択する、半角空白)
5a + b
(兄弟要素を選択する、直前がa要素のb要素)

 <ul>
    <li>項目</li>
    <li>項目</li>
    <li>項目</li>
    <li>項目</li>
  </ul>

１番目のli以外につく。

擬似クラス1

:nth-child()
・空白は入れない。li:nth-child(3)と書く。兄弟要素のうちの何番目につくか。
・()に３n→3の倍数、odd→奇数、even→偶数
:first-child
・空白は入れない。li:first-childと書く。
:last-child
・空白は入れない。li:last-childと書く。

擬似クラス２

:hover
・少し色が変わる。
:focus
・インプット要素のようにfocusがもてるやつのみ。
:action
・ボタンを押し込んだり要素をクリックしたときの状態を表現する。

擬似クラス３

:not()
・()かっこの中がついていないものは外す。()の中は.クラス名など。

擬似要素

擬似クラスと違い::から始まる。
::after
::before

p::after {
  content: ' -';
}

contentは中身の変更。

#　詳細度１
三つの基準からなる。上が優先される。
１idセレクターが出て来る回数
２class,擬似クラス,属性セレクターが来る回数
３要素セレクター,擬似要素が来る回数
＊検証では詳細度が高い順に出て来る。

詳細度２

上よりも優先される方法
１!importantを最後に書く

a {
  color: red !important;
}

２styleでHTMLに直接書く。