css selector

 

-.class

:class 선택자라고 하며 css 에서 .anything 라고 정의 되었을 경우 html 의 class=”anything” 인 모든 요소를 선택한다.

 

.anything {background-color:yellow;}

 

 

-#id

:id 선택자라고 하며 css 에서 #anything 라고 정의 되었을 경우 html 의 id=”anything” 인 모든 요소를 선택한다.

 

#anything {background-color:yellow;}

 

 

-*

:전체 선택자라고 하며 css 에서 *를 사용할 경우 html 의 모든 요소를 선택한다.

 

* {background-color:yellow;}

 

 

-element

:요소 선택자라고 하며 css 에서 어떤 요소를 지정할 경우 html 의 지정된 모든 요소를 선택한다.

 

p {background-color:yellow;}

 

 

-element, element

:요소 선택자를 콤마(,)를 이용해 나열해서 지정할 경우 html 의 나열된 여러 요소를 동시에 선택한다.

 

p,div {background-color:yellow;}

 

 

-element element

:자손 선택자라고 하며 앞에 html 에서 지정된 요소의 하위 요소 중 뒤에 지정된 모든 요소를 선택한다. 아래 예제에서는 모든 div 요소 아래의 모든 p 요소를 선택하여 style 을 지정하게 된다. 지정할 상위 요소와 하위 요소 사이에는 한 칸의 공백(띄어쓰기)을 사용한다.

 

div p{background-color:yellow;}

 

 

-element>element

:자식 선택자라고 하며 html 에서 앞에 지정된 요소의 바로 아래(하위)의 요소 중 뒤에 지정된 요소를 선택한다. 아래 예제에서는 모든 div 요소 바로 아래의 모든 p 요소를 선택하여 style 을 지정하게 된다.

 

div>p{background-color:yellow;}

 

 

-element + element

:인접 선택자라고 하며 앞에 지정된 요소의 바로 뒤에 오는 같은 레벨의 지정된 요소를 선택한다. 아래 예제에서는 모든 div 요소 바로 뒤에 위치한 같은 레벨의 p 요소를 선택하여 style 을 지정하게 된다.

 

div+p{background-color:yellow;}

 

 

-[attribute]

:속성 선택자라고 하며 지정된 속성을 가진 모든 요소를 선택한다. 아래 예제에서는 html 문서에 target 속성을 가진 a 요소가 있다면 그 요소를 모두 선택하여 style 을 주게 된다.

 

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

 

 

-[attribute=value]

:속성 값 선택자라고 하며 지정된 속성 중 지정된 값을 가진 모든 요소를 선택한다. 아래 예제에서는 html 문서에 a 요소 중 target=_blank 값을 가진 요소를 모두 선택하여 style 을 주게 된다.

 

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

 

 

-[attribute~=value]

:속성 값 선택자라고 하며 지정된 속성 중 지정된 단어을 가진 모든 요소를 선택한다. 아래 예제에서는 html 문서에 a 요소 중 title 값에 cont 단어를 가진 요소를 모두 선택하여 style 을 주게 된다.

 

a[title~=cont]{background-color:yellow;}

 

 

-[attribute|=language]

:속성 값 선택자라고 하며 language 속성을 가진 요소 중 지정된 언어를 가진 모든 요소를 선택한다. 아래 예제에서는 html 요소 중 lang 값이 en 인 요소를 모두 선택하여 style 을 주게 된다.

 

[lang|=en]{background-color:yellow;}

 

 

-:link

:링크 선택자 - html 에서 모든 링크들을 선택한다.

 

a:link{background-color:yellow;}

 

 

-:visited

:링크 선택자 - 링크 중에서도 방문(클릭하여 이동을 한)한 적이 있는 모든 링크들을 선택한다.

 

a:visited{background-color:yellow;}

 

 

-:active

:링크 선택자 - 링크 중에서 활성화 상태인 모든 링크들을 선택한다.

 

a:active{background-color:yellow;}

 

 

-:hover

:링크 선택자 - 링크 중에서 마우스 오버 상태인 모든 링크들을 선택한다.

 

a:hover{background-color:yellow;}

 

 

-:focus

:링크 선택자 - input 요소들 중에서 현재 포커스가 된 요소를 선택한다.

IE6, IE7 브라우저에서 지원 안함

 

input:focus{background-color:yellow;}

 

 

:first-letter

:가상 선택자 - 지정한 요소 중에서 첫 번째 단어를 선택하여 style을 줄 수 있으며,
font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height, float, clear 같은 속성을 사용할 수 있다.

 

p:first-letter{background-color:yellow;}

 

 

-:first-line

:가상 선택자 - 지정한 요소 중에서 첫 번째 줄을 선택하여 style을 줄 수 있으며,
font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear 같은 속성을 사용할 수 있다.

 

p:first-line{background-color:yellow;}

 

 

-:first-child

:가상 선택자 - 지정한 요소 중에서 첫 번째 하위(자식) 요소를 모두 선택하여 style 을 줄 수 있다.

 

p:first-child{background-color:yellow;}

 

 

-:before

:가상 선택자 - 지정한 요소의 앞 부분에 콘텐츠를 넣을 수 있다. 아래 예제는 p 요소를 선택하여 그 앞 부분에 “Chapter 1″이라는 콘텐츠를 넣을 수 있다.

IE6, IE7 브라우저에서 지원 안함

 

p:before{content:"Chapter 1";}

 

 

-:after

:가상 선택자 - 지정한 요소의 뒷 부분에 콘텐츠를 넣을 수 있다. 아래 예제는 p 요소를 선택하여 그 뒷 부분에 “story END”라는 콘텐츠를 넣을 수 있다.

IE6, IE7 브라우저에서 지원 안함

 

p:after{content:"story END";}

 

 

-:lang(language)

:가상 선택자 - 지정한 요소 중 지정한 언어 속성를 선택하여 style 을 줄 수 있다. 아래 예제는 p 요소 중 lang(언어) 속성이 it 인 것을 선택한다.

IE6, IE7 브라우저에서 지원 안함

 

p:lang(it){background:yellow;}

 

 

출처 : http://htmlcss.kr/css/css-selector/