CSS - 선택자

여러개의 element 선택

h1, h2 { }

 

class 선택자

p.greentea { } /* class가 greentea인 <p/> 선택 */

.greentea{ } /* class가 greentea인 모든 태그 */

 

id 선택자

#footer { } /* id가 footer인 모든 태그 */

p#footer{}

 

자식(Child) element 선택

중첩이 2단계 이상 깊어지는 자손(자식의 자식)은 선택하지 않습니다. 오직 한 단계 바로 아래 포함된 자식만 선택합니다.

div>h2{ color:red} /* <div/> 하위에 있는<h2/> 선택  */

.detail>p {}   /* class가 "detail"로 지정되어 있는 하위의 <p/> 선택 */

자손(Descendant) element 선택

div h2{ color:red} /* <div/> 하위에 있는<h2/> 선택  */

.detail p {}   /* class가 "detail"로 지정되어 있는 하위의 <p/> 선택 */

 

상태에 따른 선택자

a:visited{}

a:link {}

상태는 active, hover, link, visited, first-child 등

 

의사(Psdudo) element 선택자

p:first-letter {} 

p:first-line {} 

 

속성(Attribute) 선택자

img[width] {border:black thin solid;} /* width 속성을 가진 모든 이미지 선택 */

img[height="300"] {border:red thin solid; } /* 값이 300인 height 속성을 가진 모든 이미지 선택 */

image[alt~="flowers"]  {border:red thin solid; }  /* "flowers"라는 단어를 포함하는 alt 속성을 가진 모든 이미지 */

 

형제(Sibling) element 선택자

h1+h2 { color:red }

형제 선택자는 선택자 사이에 덧셈 기호(+)를 넣어 표시합니다. 요소가 형제 관계에 있고 나연 순서가 같으면 뒤에 등장하는 요소를 선택합니다.

위의 인접 형제 선택자 선언 예제에 따르면, 다음과 같은 HTML 코드에서 <h1> 요소 다음에 <h2> 요소가 순서대로 등장하므로 <h2> 요소는 붉은색 글꼴로 처리됩니다.

선택자 결합

div#greentea > blockquote {}  /* <blockquote/>의 부모가 되어야하는 "greentea" id를 가진 <div/> 자손 선택자 */

div#greentea > blockquote p {} /* <blockquote/>의 자손이자 "greentea" id를 가진 <div/>의 자손인 <p/> 선택 */

div#greentea > blockquote p:first-line /* 그 <p/>의 첫 줄 */

 

공용 선택자(universal selector) 

* { … }

공용 선택자는 별표(*)로 표시합니다. 이 선택자는 모든 HTML 요소를 선택합니다. 웹 브라우저는 보통 HTML 요소마다 기본 CSS 양식을 지정해 두는데 이것을 동일한 값으로 초기화할 수 있습니다.

공용 선택자를 사용하면 페이지 표시 속도가 느려지므로 꼭 필요한 경우가 아니면 사용을 권장하지 않습니다.

가상 선택자(pseudo selector) 

a:focus { … }

가상 선택자는 다른 선택자 뒤에 콜롞(:)을 붙여 표시합니다. 요소의 상태를 선택하는 '가상 클래스 선택자'와 HTML 코드 속에 없는 가상의 요소를 선택하는 '가상 요소 선택자'가 있습니다. 다른 선택자들이 정적읶 상태의 HTML 요소를 선택하는 것에 반해서 가상 선택자는 HTML 요소의 동적읶 변화 상태를 선택하거나 HTML 코드에 없는 가상의 요소를 선택합니다.

가상 클래스 선택자  종류

:link    아직 방문한 적이 없는 링크를 선택합니다.

a:link   'a' 라는 타입 선택자와 결합해서 사용합니다.

:visited   이미 방문한 릿크를 선택합니다.

a:visited   a 라는 타입 선택자와 결합해서 사용합니다.

:hover   마우스 포인터가 가리키는 동안의 상태를 선택합니다.

a:hover

:active   마우스가 클릭되는 순갂 또는 엔터 키를 누른 순갂의 상태를 선택합니다.

a:active

:focus   포커스를 받은 요소의 상태를 선택합니다.

a:focus

:first-child   첫 번째 자식 요소를 선택합니다.

li:first-child

:lang(language)   언어 속성이 읷치하면 선택합니다.

p:lang(en)

주의

IE6 브라우저는 ':first-child, :lang()' 가상 클래스 선택자를 지원하지 않습니다. IE6 브라우저는 :hover, :active, :focus 가상 클래스 선택자를 'a' 이외의 요소에 지원하지 않습니다.

'a' 요소에 다양한 상태의 가상 클래스 선택자를 지정할 때는 :link(링크) :visited(방문 시) :hover(지나치게) :active(활동하면) :focus(주목받습니다) 순서를 유지하는 것이 좋습니다. 나중에 선얶된 클래스의 우선순위가 높기 때묷에 먼저 선얶된 것들을 모두 덮어쓰게 됩니다. 예를 들어, :hover 뒤에 a:visited를 쓰면 이미 방묷한 릿크 위에 맀우스를 올려도 :hover가 적용되지 않습니다. 이미 방묷한 릿크 위에 맀우스를 올렸을 때 반응하게 하려면 :visited 다음에 :hover 클래스가 오도록 작성해야 합니다.

가상 요소 선택자 종류

:first-line   첪 번째 행을 선택합니다. 블록 요소에만 적용할 수 있습니다.

p:first-line

:first-letter   첪 번째 묷자를 선택합니다. 블록 요소에만 적용할 수 있습니다.

p:first-letter

:before   요소 시작 지점 안쪽의 가상 요소를 선택합니다.

div:before{ content:"…" }   (div 요소 시작 지점 안쪽에 가상의 '…' 문자열을 생성하고 선택합니다.)

:after   요소 종료 지점 안쪽의 가상 요소를 선택합니다.

div:after{ content:"…" } (div 요소 종료 지점 안쪽에 가상의 '…' 문자열을 생성하고 선택합니다

출처 - http://blog.benelog.net/1456715

출처 - XE-Skin_Manual-ko(v1.1).pdf

---

:before, :after 사용

예제

<a href="#">1111</a>
<a href="#">222</a>
<a href="#">333</a>

미리보기

1111 222 333

여기에 :before를 이용해서, 혹은 :after를 이용해서 구분자를 만들어봅니다. 처음에는 :after를 사용하곘습니다.

예제 1 - after사용 (CSS)

a:after{content:" | "}

미리보기

1111222333

예제 2 - 마지막의 구분자 없애기

a:after{content:" | "}
a:last-child:after{content:"";}

미리보기

1111222333

출처 - http://blog.wincomi.com/244