<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;
}