:first-child, :last-child 선택자

 

 

:first-child, :last-child 선택자

 

 

어제는 css 선택자의 종류를 알아 보았는데

 

css 선택자, 선택자 종류와 사용법

 

오늘은  의사 클래스 선택자 중에 :first-child 와 :last-child 선택자를 알아 보겠습니다

 

먼저 의사 클래스는 영어로 pseudo-class라고 하는데

 

pseudo의 뜻을 영영사전에서 살펴 보면 다음과 같습니다.

 

not real, but pretending to be real

진짜가 아니지만, 진짜인 척하는....

 

-맥밀란 사전 참조-

 

 

pseudo-class를 의사 클래스, 가상 클래스라고 쓰곤 하는데...

 

가상 클래스라고 해야 의미가 좀 더 와 닿는 것 같아

 

이후부터는 가상 클래스라고 하겠습니다~

 

 

 

 

가상 클래스와, 가상 요소를 쓰는 이유

 

 

기존에 있던 선택자(타입 선택자, id, class 선택자, 전체 선택자 등)로는

 

구체적인 스타일을 줄 수가 없는 부분들,

 

예를 들어, 어떤 요소도 첫번째 줄만 선택해서 스타일을 주는 방법이 없습니다.

 

가상 클래스와, 가상 요소는 좀 더 구체적으로 집어 스타일을 주는 것이 가능합니다.

 

 

:first-child (css level 2)

 

:first-child는 부모 요소 안에 있는 첫번째 자식만을 선택할 수 있는 선택자입니다.

 

 

사용 방법:

 

요소:first-child { 속성: 속성값; }

 

 

지원 브라우저:  ie7+, Chrome 4+, FF 3.0(1.9)+, Opera 9.5+, Safari4+

(ie8 이전 버전은 doctype을 선언해야 함)

 

 

:last-child (css level 2)

 

부모 요소 안에 있는 마지막 자식만  선택하는 선택자입니다.

 

사용 방법:

 

요소:last-child { 속성: 속성값; }

 

지원 브라우저: ie9+, chrome 10.+, ff, opera 9.5+, safari 3.2+

 

 

실제 사용 예를 보겠습니다~

first-child.htm

 

 

html

<h4>[산토끼쏭]</h4> <div>   <p>산토끼 토끼야 </p>   <p>어디를 가느냐</p>   <p>깡총 깡총 뛰면서 </p>   <p>어디를 가느냐 </p> </div>   <h4>[읽어야 할 책 목록]</h4> <ol>   <li>샤를 드 푸코, 사하라의 불꽃</li>   <li>장영희, 생일</li>   <li>서정주, 밤이 깊으면</li> </ol>

 

css

p:first-child{color:red;} ol > li:last-child{background-color: yellow;}

 

p의 첫번째 자식에만 글자 색을 빨간색으로 하며,

 

ol 자식인 li 요소에서, 마지막 자식에만 바탕을 노란색으로 한다는 의미

 

 

▶실행 화면입니다.

 

 

 

 

참조  http://www.w3.org/TR/selectors/#first-child-pseudo

 

스타일 적용 우선 순위와 속성 강제 적용 !important

 

웹개발자 도구, 웹 디벨로퍼 툴바 설치/제거 방법

 

지구별 안내서 네이버 오픈캐스트 활용법