CSS 선택자

CSS 선택자(Selector)

선택자는 웹페이지의 제목, 문단, 링크, 목록, 이미지 등의 HTML 요소들을 선택하는 역할을 한다.

 

● 태그 선택자

● 아이디 선택자

● 클래스 선택자

● 태그와 함께 쓰는 선택자

 

1)태그 선택자

p {

text-align: center;

color: red;

}

 

 

2)클래스 선택자

 

.center {

text-align: center;

color: red;

}

 

 

3)아이디 선택자

 

#center {

text-align: center;

color: red;

}

 

 

4)태그와 함께 쓰는 선택자

 

p.center {

text-align: center;

colorL red;

}

 

※ Class 선택자와 id 선택자

class 선택자와 id 선택자는 XHTML 요소에 class나 id 속성을 부여한 경우 class명 이나 id명으로 접근하여 선택할 때 사용한다.

class 명은 여러번 사용할 수 있기 때문에 여러가지 요소들을 한꺼번에 선택하여 일관된 스타일을 지정할 때 사용하는 것이 좋다.

특정 id 값을 가지고 있는 유일한 요소에 접근해서 스타일 지정시 id선택자 형식을 사용할수 있다.

선택자로 사용할 때 class명이나 id명 앞에 요소명을 지정하여 스타일의 적용 범위를 제한하거나 요소명을 생략하여

범용적으로 사용할 수 있다.

 

형식

 

class 선택자

.class명 { 속성 : 값 ; }

.note { color :blue ; }

 

id 선택자

#id명 { 속성 : 값 ; }

#gnb { list-style-type : none ; }

 

 

속성(attribute) 선택자

XHTML 요소가 특정 속성명이나 속성값을 가진 경우 해당 속성명으로 접근해 스타일을 적용하는 선택자 방식이다.

 

요소명[속성명] : a 요소에 target 속성이 있는 경우

a[target] { background-color:yellow; }

 

요소명[속성명="값"] : a 요소에 target 속성의 값이 _blank인 경우

a[target="_blank"] { background-color:yellow; }

 

요소명[속성명~="값"] : a 요소에 class 속성의 값이 공백문자로 구분하여 여러 개 있는 경우

a[class~="new"] { background-color:yellow; }

 

요소명[속성명｜="값"] : a 요소에 class 속성의 값에 하이픈(-)이 포함된 경우

a[class｜="new"] { background-color:yellow; }

 

요소명[속성명^="값"] : a 요소에 href 속성의 값에 http로 시작하는 경우

a[href^="http"] { background-color:yellow; }

 

요소명[속성명*="값"] : a 요소에 href 속성의 값에 www가 포함된 경우

a[href*="www"] { background-color:yellow; }

 

 

 

가상요소와 가상 클래스

가상요소 선택자는 실제로 존재하지 않는 요소를 마치 존재하는 것처럼 이용하는 방법이다.

가상 요소 선택자를 이용하면 콘텐츠 영역의 앞이나 뒤에 가상 콘텐츠를 추가할 수 있다.

가상 클래스 선택자는 스타일을 적용하는 대상을 요소나 속성, 속성 값에 따라 구분하는 것이 아니라

'상황'에 따라 구분하는 방법이다.

가상 클래스에는 a:link, a:visited, a:hover, a:active등이 있다.

 

형식

1)가상요소

 

요소명 : 가상 요소명 { 속성 : 값 ; }

p:first-line { color : blue ; }

p:first-letter { color : red ; }

p:before { content : "문단 시작"; }

p:after { content : "문단 종료"; }

 

2)가상 클래스

 

요소명 : 가상 요소명 { 속성 : 값 ; }

p:first-child { color : green ; }

a:link { color : blue ; }

a:visited { color : purple ; }

a:hover { color : orange ; text-decoration: underline; }

a:active { color : red ; text-decoration: underline; }

a:focus { background: #fcf ; }

 

선택자 조합

 

선택자들의 적용범위에 따라 하위선택자, 자식 선택자 , 인접 형제 선택자로 구분할 수 있다.

 

1)하위 선택자(descendant selector)

상위 요소가 포함하는 모든 하위 요소에 스타일을 지정시 사용.

 

형식

 

선택자 선택자 { 속성: 값; }

  div p { color : gray; }

 

 

2) 자식 선택자(child selector)

부모요소 바로 다음에 있는 자식의 요소에 스타일을 적용하는 방법으로 익스플로러 6같은

구버전의 웹브라우저에서는 지원하지 않음

 

형식

 

선택자 > 선택자 { 속성 : 값; }

div > p { color :gray; }

 

 

3)인접 형제 선택자(adjecent sibling selector)

인접 형제 선택자는 계층 구조로 접근했을때 처음 등장하는 요소를 형요소

뒤에 등장하는 요소를 동생 요소라고 본다. 동생요소에 스타일을 적용할 때 사용한다.

익스플로러 6같은 구버전의 웹브라우저에서는 지원하지 않는다.

 

형식

 

선택자 + 선택자 { 속성 : 값; }

 h1 + h2 { color : gray; }