CSS : selectors

<ol>
  <li>1</li>
  <li class="active">2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ol>

CSS

.active ~ li {
  active 클래스 다음에 li 모두 선택(3, 4, 5)
}

.active + li {
  active 클래스 다음에 li만 선택(3)
}

<section>
  <h1>Hello</h1>
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ol>
</section>

CSS 

li:first-child <- 1
li:list-child <- 5

li:nth-child(2n) <- 짝수
li:nth-child(2n - 1) <- 홀수

hover, focus, active

hover: 마우스오버
active : 누르는 순간
focus: 눌러서 포커스되었을때

CSS 선택자 우선순위👍🙌 금,은,동 순위(점수합산)
id 선택자 1위(금메달)
클래스선택자, 가상클래스( : <-써있는것들) 2위(은메달)
요소선택자 html 태그 자체 3위(동메달)

ex)
#hello.tab-nav (금 + 은) > header.main-header(동 + 은)

❗ 위 룰 깨드리는 법(꼭 필요할때만 사용)

<h1 style="color: red;"></h1>  우선선위(inline-style)

❗❗ 제일강력한 순위 !important (inline-style보다 위, 가장최상위)

h1 {
	color: red !important;
}