구조선택자
특정한 위치에 있는 태그를 선택할 때 사용
| 형태 | 설명 |
| :first-child | 형제 관계에서 첫 번째로 등장하는 태그 선택 |
| :last-child | 형제 관계에서 마지막으로 등장하는 태그 선택 |
| :nth-child(수열) | 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택 |
| :nth-last-child(수열) | 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택 |
작성 시 주의사항 (자주 실수하기 쉬운 부분)
[첫 번째 a 태그의 글씨 색상을 빨간색으로 변경하고자 하는 예제]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li > a:first-child { color: red; }
</style>
</head>
<body>
<ul>
<li> <a href="#">주의사항</a></li>
<li> <a href="#">주의사항</a></li>
<li> <a href="#">주의사항</a></li>
<li> <a href="#">주의사항</a></li>
<li> <a href="#">주의사항</a></li>
</ul>
</body>
</html>[실행 결과]
첫 번째 a 태그에 빨간색이 적용된다고 예측할 수 있으나, 실행 결과를 보면 그렇지 않다.
실행 결과, 모든 a 태그에 빨간색이 적용된 것을 확인할 수 있다.
코드 실행 순서에 따르면,
li 태그의 첫 번째 자손에 해당하는 a 태그를 선택 -> 5개의 a 태그가 조건에 해당되어 빨간 글씨로 표시됨
[원하는 실행 결과를 얻기 위한 올바른 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li:first-child > a { color: red; }
</style>
</head>
<body>
<ul>
<li> <a href="#">주의사항</a></li>
<li> <a href="#">주의사항</a></li>
<li> <a href="#">주의사항</a></li>
<li> <a href="#">주의사항</a></li>
<li> <a href="#">주의사항</a></li>
</ul>
</body>
</html>[실행 결과]
'Frontend > CSS' 카테고리의 다른 글
| [CSS] 상태 선택자 (0) | 2021.09.02 |
|---|
