1. first-child
부모의 첫 번째 자식을 선택함
<body>
<h2>Movie List</h2>
<ul>
<li>Toy Story</li>
<li class="movie">Zootopia</li>
<li class="movie">Inside Out</li>
<li class="movie">Coco</li>
<li class="movie">Finding Nemo</li>
</ul>
</body>
</html>.movie:first-child {
font-size: 26px;
}코드를 이렇게 작성하면 movie 클래스를 가지고 있는 요소 중 첫 번째인 Zootopia 의 폰트 사이즈가 바뀔거라 생각하지만 실제론 아무런 변화도 일어나지 않는다.
☆ first-child 는 말 그대도 부모의 첫 번째 자식을 선택하는 것인데, movie 클래스를 가진 li 요소의 부모는 ul 태그이고, ul 태그의 첫 번째 자식인 Toy Story 가 movie 클래스를 가지지 않기 때문에 해당하는 것이 없어 폰트 사이즈가 바뀌지 않는 것이다.
2. last-child
부모의 마지막 자식을 선택한다.
<body>
<h2>Lorem Ipsum</h2>
<p>
<span>Lorem ipsum dolor sit amet</span>
<span>consectetur adipiscing elit.</span>
<span>Commodi voluptates sint iure quas quasi.</span>
</p>
</body>/* 2. last-child */
span:last-child {
color: tomato;
}
3. nth-child(n)
부모의 n 번째 자식을 선택한다.
- 짝수 번째 자식 선택 : nth-child(2n), nth-child(even)
- 홀수 번째 자식 선택 : nth-child(2n-1), nth-child(2n+1), nth-child(odd)
<body>
<h2>Movie List</h2>
<ul>
<li>Toy Story</li>
<li class="movie">Zootopia</li>
<li class="movie">Inside Out</li>
<li class="movie">Coco</li>
<li class="movie">Finding Nemo</li>
</ul>
<ol>
<li>Americano</li>
<li>Latte</li>
<li>Hot Choco</li>
</ol>
</body>li:nth-child(2n) {
color: hotpink;
}
'CSS' 카테고리의 다른 글
| display: contents로 gird 문제 해결하기 (0) | 2023.06.12 |
|---|---|
| CSS Selector - 타입 선택자 (1) | 2023.04.15 |
| inline 요소와 block 요소의 차이 (0) | 2023.04.12 |
| CSS 선택자(Selector) - Type, Class, Id 선택자 (0) | 2023.04.09 |
| 캐스캐이딩(Cascading) 원칙 (0) | 2023.04.09 |
