• Q&A
  • 회원가입
  • 로그인

[selector] CSS - :first-child 가상선택자 - 그부모요소의 첫번째자식요소 (= 퍼스트차일드선택자, IE7)

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>

결과 보기


2-2.
:nth-child(n수식)


짝수번째
: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>

결과 보기

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012