강의를 듣다가 기존에 알던 CSS 선택자 외에 알게 된 다른 복합 선택자들
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Name</title>
<!--브라우저 스타일 초기화-->
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css" rel="stylesheet">
</head>
<body>
<div class="box">
<ul class="fruits">
<li class="orange">ORANGE</li>
<li class="cherry">CHERRY</li>
<li class="kiwi">KIWI</li>
<li class="melon">MELON</li>
<li class="plum">PLUM</li>
</ul>
</div>
</body>
</html>
이러한 태그 구조가 있다고 가정해볼 때,
<style>
.fruits * {background:#ccc; text-align:center; }
</style>
* 은 모든 태그를 선택하는 선택자로
이 상황에서는 .fruits 안에 있는 모든 태그(= 모든 li 태그)를 선택하게 되어 다음과 같은 결과가 나온다.
.fruits *:nth-child(2n) {color:rgb(79, 111, 208);}
2n에서 n은 0부터 시작하는 숫자이다.
2n은 2x0, 2x1, 2x2, 2x3 ... 으로 해당 코드는
.fruits 안에 있는 자식 태그 중에 0번째, 2번째, 4번째 ... 태그를 선택하게 되어 아래의 결과가 나온다.
+
:nth-child(2n+1) -> 2x0+1, 2x1+1, 2x2+1, 2x3+1 ... 으로 해석
.fruits *:not(span) {padding: 10px 0;}
.fruits 안에 있는 자식 태그 중에 span 태그가 아닌 것을 선택한다.
.cherry + li {background: lightgoldenrodyellow;}
.cherry의 바로 다음 형제 li 태그를 선택한다.
.cherry ~ li {background: lightgoldenrodyellow;}
.cherry의 다음 태그들 중 모든 li 태그를 선택한다.
다양한 선택자를 알아두어 효율적으로 style을 짤 때 사용할 수 있으면 좋을 것 같다.