CSS 가상 선택자 (부모 요소 > 자식 요소:first-child) : CSS2 (익스7 이상 주요 브라우저에서 지원)
부모요소>자식요소:first-child 의미
특정부모요소 지정해, 그 부모의 첫번째 자식요소만 지정.
1.
float 속성값에 따라 첫번째 자식요소가 달라짐.
즉,
float:left - 왼쪽 것이 첫번째 자식요소.
float:right - 오른쪽 것이 첫번째 자식요소.
2.
메뉴간 구분막대(bar)를 처음 부분에선 뺄 때 유용.
3.
> 기호 앞뒤는 붙여도 되고 띄어도 됨.
(예제)
<style>
div > p:first-child {color:red;}
</style>
<h1>홈짱닷컴 (homzzang.com)</h1>
<div>
<p>CSS 강의</p>
<p>앞 p 요소에 이어 두 번째 등장하는 요소엔 적용 안됨</p>
</div>
<div>
<hr></hr>
<p>앞 hr 요소에 이어 두 번째 등장하는 요소엔 적용 안됨</p>
</div>
<p> 자식 요소가 아닌 경우엔 적용 안됨</p>
<style>
ul>li:first-child {color: red;}
</style>
<ul>
<li>홈짱닷컴 첫 번째</li> <li>홈짱닷컴 두 번째</li>
<li>홈짱닷컴 세 번째</li>
</ul>
결과 보기
1.
:first-child - 그 부모의 첫번째자식요소 선택
<style>
li:first-child {color: red;}
</style>
<ul>
<li>홈짱닷컴 첫 번째</li> <li>홈짱닷컴 두 번째</li>
<li>홈짱닷컴 세 번째</li>
</ul>
결과 보기
2-1.
:nth-child(n) - 특정순번째 자식요소 지정
(예) 세 번째 nth-child(3) , 네 번째 nth-child(4)
<style>
ul>li:nth-child(2) {color: red;}
</style>
<ul>
<li>홈짱닷컴 첫 번째</li>
<li>홈짱닷컴 두 번째</li> <li>홈짱닷컴 세 번째</li>
</ul>
결과 보기
짝수번째
:nth-child(2n)
예제보기
홀수번째
:nth-child(2n+1)
예제보기
2, 5, 8 .....
li:nth-child(3n-1)
예제보기
3.
:last-child - 마지막 자식요소
<style>
ul>li:last-child {color: red;}
</style>
<ul>
<li>홈짱닷컴 첫 번째</li>
<li>홈짱닷컴 두 번째</li>
<li>홈짱닷컴 세 번째</li></ul>
결과 보기
※ 네비게이션 메뉴에서 메뉴간 사이를 구분하는 막대(bar)를 마지막 부분에선 뺄 때 유용함.
응용1 - 첫번째 ul태그의 모든 li 선택.
<style>
ul:first-child li {color: red;}
</style>
<ul>
<li>홈짱닷컴 첫 번째</li>
<li>홈짱닷컴 두 번째</li>
<li>홈짱닷컴 세 번째</li>
</ul>
<ul>
<li>홈짱닷컴 첫 번째</li>
<li>홈짱닷컴 두 번째</li>
<li>홈짱닷컴 세 번째</li>
응용2 - 첫 번재 ul태그의 첫번째 li 선택.
<style>
ul:first-child li:first-child {color: red;}
</style>
<div>
<ul>
<li>홈짱닷컴 첫 번째</li>
<li>홈짱닷컴 두 번째</li>
<li>홈짱닷컴 세 번째</li>
</ul>
<ul>
<li>홈짱닷컴 첫 번째</li>
<li>홈짱닷컴 두 번째</li>
<li>홈짱닷컴 세 번째</li>
</ul>
</div>
결과 보기
