CSS 가상 선택자 (부모 요소 > 자식 요소:first-child) : CSS2 (익스7 이상 주요 브라우저에서 지원)
부모요소>자식요소:first-child 의미
특정부모요소 지정해, 그 부모의 첫번째 자식요소만 지정.
1.
float 속성값에 따라 첫번째 자식요소가 달라짐.
즉,
float:left - 왼쪽 것이 첫번째 자식요소. - 오른쪽 것이 첫번째 자식요소.
2.
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
<ul>
<li>홈짱닷컴 첫 번째</li> <li>홈짱닷컴 두 번째</li>
<li>홈짱닷컴 세 번째</li>
</ul>
결과 보기
1.
:first-child - 그 부모의 첫번째자식요소 선택
li:first-child {color: red;}
<ul>
<li>홈짱닷컴 첫 번째</li> <li>홈짱닷컴 두 번째</li>
<li>홈짱닷컴 세 번째</li>
</ul>
결과 보기
2-1.
:nth-child( n ) - 특정순번째 자식요소 지정 (예) 세 번째 nth-child(3) , 네 번째 nth-child(4)
ul>li :nth-child(2)
<ul>
<li>홈짱닷컴 첫 번째</li>
<li>홈짱닷컴 두 번째</li> <li>홈짱닷컴 세 번째</li>
</ul>
결과 보기
짝수번째:nth-child(2n)
예제보기
홀수번째:nth-child(2n+1)
예제보기
li:nth-child(3n-1) 예제보기
3.
:last-child - 마지막 자식요소
ul>li :last-child
<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>
결과 보기
최신댓글