형제 관계 있는 태그들 중에서 특정 태그만 선택하는 선택자
선택하는 기준을 통해 위치를 구분함
A : 태그 선택 기준 div 태그대신 A 변수명으로 선택
A : first-child
형제들 중에서 가장 첫번째를 선택
첫번째가 A 가 맞다면 선택
B : last-child
형제들 중에서 가장 마지막을 선택
마지막이 B 가 맞다면 선택
일:nth-child(1) :
형제들 중에서 첫 번째가 일이 맞다면
이:nth-child(2) :
형제들 중에서 두 번째가 이가 맞다면
삼:nth-child(3) :
형제들 중에서 세 번째가 삼이 맞다면
사:nth-child(4) :
형제들 중에서 네 번째가 사가 맞다면
만약에 태그옆에 class 나 id 가 없다면 태그명을 작성해줘도 됨
.선택받은아이들 > div:nth-child(1) {}
선택받은 아이들 태그 안에서 가장 첫 번째 작성된 div 태그를 선택
.선택받은아이들 > div:nth-child(2) {}
선택받은 아이들 태그 안에서 두 번째 작성된 div 태그 선택
.선택받은아이들 > div:nth-child(3) {}
선택받은 아이들 태그 안에서 세 번째 작성된 div 태그 선택
만약에 중간 자식을은 건너뛰고 맨 마지막에 있는 자식만 꾸며주고 싶을 때는
.선택받은아이들 > div:last-child {}
태그는 div span a li ul 모든 태그에 사용 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>일반 위치 선택자</title>
</head>
<body>
<h1>일반적인 위치나 구조를 나타내는 선택자</h1>
<pre>
형제 관계 있는 태그들 중에서 특정 태그만 선택하는 선택자
선택하는 기준을 통해 위치를 구분함
<div>
<div class="A"></div>
<div class="B"></div>
</div>
A : 태그 선택 기준 div 태그대신 A 변수명으로 선택
A : first-child
형제들 중에서 가장 첫번째를 선택
첫번째가 A 가 맞다면 선택
B : last-child
형제들 중에서 가장 마지막을 선택
마지막이 B 가 맞다면 선택
<div class="형제들">
<div class="일"></div>
<div class="이"></div>
<div class="삼"></div>
<div class="사"></div>
</div>
일:nth-child(1) :
형제들 중에서 첫 번째가 일이 맞다면
이:nth-child(2) :
형제들 중에서 두 번째가 이가 맞다면
삼:nth-child(3) :
형제들 중에서 세 번째가 삼이 맞다면
사:nth-child(4) :
형제들 중에서 네 번째가 사가 맞다면
만약에 태그옆에 class 나 id 가 없다면 태그명을 작성해줘도 됨
<div class="선택받은아이들">
<div></div>
<div></div>
<div></div>
</div>
.선택받은아이들 > div:nth-child(1) {}
선택받은 아이들 태그 안에서 가장 첫 번째 작성된 div 태그를 선택
.선택받은아이들 > div:nth-child(2) {}
선택받은 아이들 태그 안에서 두 번째 작성된 div 태그 선택
.선택받은아이들 > div:nth-child(3) {}
선택받은 아이들 태그 안에서 세 번째 작성된 div 태그 선택
만약에 중간 자식을은 건너뛰고 맨 마지막에 있는 자식만 꾸며주고 싶을 때는
.선택받은아이들 > div:last-child {}
태그는 div span a li ul 모든 태그에 사용 가능
</pre>
</body>
</html>