CSS 선택자(Selector)

 

 

선택자란 CSS로 UI 디자인을 할 때 '어디를 꾸며 줄까?' 하는 고민의 대상이 되는 부분을 말합니다.

그중에서 타입 선택자, id 선택자, class 선택자가 가장 중요합니다.

 

 

1. 타입 선택자

태그 이름을 그대로 갖다 쓰는 선택자입니다.

p { color : blue; }   - p태그 안의 글자들을 파란색으로 처리함.

 

 

2. id 선택자

id로 붙인 이름을 가져다 쓰는 선택자 입니다.  - '#'를 붙여 표기함.

#ctxt { color : blue; }  -- id명이 ctxt인 요소의 글자들을 파란색으로 처리함.

 

 

3. class선택자
class로 붙인 이름을 가져다 쓰는 선택자입니다.

.ctxt { color : blue }  -- id명이 ctxt인 요소의 글자들을 파란색으로 처리함.

 

 

4.전체 선택자

페이지의 모든 요소를 가리키는 선택자입니다.  - '*'을 붙여 표기함.

* { color : blue; }  -- 페이지 내의 모든 요소의 글자들을 파란색으로 처리함.

 

 

5.자식 선택자

현재 요소 내의 바로 아래 나오는 요소만을 가리키는 선택자입니다. IE6에서는 표현되지 않습니다.

li > p { color : blue;}  -- li속 바로 아래 p 태그의 글자들을 파란색으로 처리함.

 

 

6.인접 선택자(형제 선택자) - 가끔사용 바로밑동생

현재 요소 밖의 바로 뒤에 나오는 요소만을 가르키는 선택자입니다. IE6에서는 표현되지 않습니다.

h1 + p { color : blue;} -- h1속 바로 다음 p태그의 글자들을 파란색으로 처리함.

 ~는 나의 모든 동생들

 

7. 속성 선택자

마크업의 속성을 선택자로 사용할 수 있습니다. IE6에서는 표현되지 않습니다.

속성	풀이
h1[class]	class 속성이 있는 모든 h1
img[alt]	alt 속성이 있는 모든 이미지
*[title]	title 속성을 갖는 모든 요소

 

8. 가상 클래스 선택자

링크 걸린 글자에 스타일을 부여하는 것입니다.

속성	풀이
a:link	링크된 글자를 보고만 있을 때의 스타일을 주는 선택자.
a:visited	링크된 글자를 눌러 해당 페이지에 갔다가 돌아온 경우의 스타일을 주는 선택자.
a:hover	링크 걸린 글자에 마우스가 닿았을 경우의 스타일을 주는 선택자.
a:active	링크 걸린 글자가 활성화되었을 경우의 스타일을 주는 선택자. (클릭했다가 돌아왔거나 클릭하려다 만 경우)
a:focus	링크 걸린 글자에 포커스가 생길 경우의 스타일을 주는 선택자. (탭키 등으로 포커스가 나타날 경우)
a:checked

 

 

9. 수도클래스 선택자

요소의 세부 조건까지도 나타낼 수 있는 선택자입니다. IE6에서는 표현되지 않습니다.

속성	풀이
:first-letter	요소의 첫 글자
:first-line	요소의 첫 줄
:first-child	같은 요소 중 첫 번째 요소
:last-child	같은 요소 중 마지막 요소
:before	요소의 맨 앞에 배치하는 마크업에는 없는 가상 요소.
:after	요소의 맨 뒤에 배치하는 마크업에는 없는 가상 요소.
:nth-child(n)	n번째 자식 태그 배열의 순서 | 짝수 번째 요소(2n),even | 홀수 번째 요소(2n+1),odd
:nth-of-type(n)	동일한 태그 배열의 순서

 

 

6번째 F의 컬러 변경하기

 

 

.lnb li:last-child a{color:#f00;}
.lnb li:nth-child(6) a{color:#f00;}
.lnb li:nth-of-type(6) a{color:#f00;}

적용후▼

 

 

 

 

10. 종속 선택자

타입 선택자와 아이디(#)/클래스(.) 선택자가 결합된 형태입니다.

p.more a { color : red;}  -- 클래스명이 more인 태그의 링크 (a)색상을 변경함.

 

 

 

11. 하위 선택자

한 선택자 내부에 존재하는 또 다른 선택자입니다.

.box li { padding : 5px 0;}  -- 클래스명이 box인 요소 내부의 li에 세로 여백을 준다.

 

 

 

12. 그룹 선택자

선택자들을 쉼표로 구분하여 여럿을 함께 기술하는 것입니다.

h1, p{border : 1px solid #000;}  -- h1과 p요소에 1px짜리 검은 테두리를 준다.