CSS Essentials: 선택자

레이블이 선택자인 게시물을 표시합니다. 모든 게시물 표시

조합자

CSS Level: CSS 1, CSS 2, CSS 3

하위 조합자 (Descendant combinator)

먼저 지정한 선택자가 뒤에 오는 선택자의 조상인 경우에 해당하는 자손 요소들을 선택합니다. 각각의 선택자를 공백으로 구분합니다.

h1 em {...}

p.intro a {...}
p .intro a {...}

주의: 위의 두 선택자는 서로 그 의미가 다릅니다.

자식 조합자 (Child combinator)

먼저 지정한 선택자의 자식 요소가 뒤에 오는 선택자인 경우에 해당하는 자식 요소들을 선택합니다. 각각의 선택자를 부등호 (>)으로 구분합니다. CSS 2.

body > p {...}
div ol>li p {...}

인접 형제 조합자 (Adjacent sibling combinator)

더하기(+) 기호로 이어진 두 개의 선택자에 해당하는 요소가 서로 부모 요소가 같은 형제 요소이며, 첫 번째 요소의 바로 뒤에 이어지는 두 번째 요소들을 선택합니다. CSS 2.

h1.opener + h2 {...}

일반 형제 조합자 (General sibling combinator)

물결(~) 기호로 구분된 두 선택자에 해당되는 요소가 서로 부모가 동일한 형제 요소이며, 첫 번째 요소의 뒤에 이어지는 두 번째 요소들을 선택합니다. 인접 형제 조합자와는 달리 바로 뒤에 이어질 필요가 없습니다. CSS 3.

h1 ~ pre {...}

의사(pseudo) 요소

의사 요소는 두 개의 콜론(::)으로 시작합니다. 다만, CSS1, CSS2에서는 하나의 콜론(:)으로 시작하는 것으로 정의되어 있습니다.

CSS Level: CSS 1, CSS 2, CSS 3

::first-line

첫 번째 줄을 선택합니다.

p::first-line { text-transform: uppercase }

::first-letter

첫 번째 문자를 선택합니다.

p::first-letter { color: green; font-size: 200% }

::before

요소의 앞에 특정 내용을 삽입할 경우에 유용합니다. CSS 2.

h1::before {content: counter(chapno, upper-roman) ". "}

::after

요소의 뒤에 특정 내용을 삽입합니다. CSS 2.

p::after {content: "]"; }

의사(pseudo) 클래스

의사 클래스 선택자는 콜론(:)으로 시작합니다.

CSS Level: CSS 1, CSS 2, CSS 3

링크 동적 의사 클래스 (Link pseudo class)

:link

아직 방문하지 않은 링크를 선택합니다.

a.external:link {...}

:visited

사용자가 이미 방문한 링크를 선택합니다.

사용자 행위 동적 의사 클래스 (User action pseudo class)

:active

사용자가 링크를 누르는 등 활성화 상태입니다.

:hover

사용자가 마우스를 링크 위로 옮겼을 때 입니다. CSS 2.

:focus

링크가 포커스를 받은 상태입니다. CSS 2.

문서 구조 의사 클래스 (Structural pseudo class)

:first-child

:nth-child(1)과 동일합니다. CSS 2.

:last-child

:nth-last-child(1)과 동일합니다. CSS 3.

:root

문서의 최상위 요소를 나타냅니다. HTML 문서에서는 <html> 요소입니다. CSS 3.

:nth-child(an+b)

a, b값은 0보다 큰 숫자로 지정합니다. n은 0부터 1씩 증가하며 해당되는 요소들을 선택합니다. odd 또는 even을 사용할 수도 있습니다. a가 0인 때에는 앞 부분을 생략할 수 있습니다. CSS 3.

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

foo:nth-child(0n+5)   /* represents an element foo that is the 5th child
                         of its parent element */
foo:nth-child(5)      /* same */

:nth-last-child(an+b)

:nth-child()와 유사하지만 문서 트리의 뒤에서부터 헤아립니다. CSS 3.

:nth-of-type(an+b)

:nth-child()와 유사하지만 동일한 요소명 중에서만 헤아립니다. CSS 3.

:nth-last-of-type(an+b)

:nth-of-type()와 유사하지만 문서 트리의 뒤에서부터 헤아립니다. CSS 3.

:first-of-type

:nth-of-type(1)과 동일합니다. CSS 3.

:last-of-type

:nth-last-of-type(1)과 동일합니다. CSS 3.

:only-child

부모요소가 존재하고 그 부모요소에게 다른 자식 요소가 없는 경우입니다. :first-child:last-child와 동일합니다. CSS 3.

:only-of-type

부모요소가 존재하고 그 부모요소에게 동일한 요소명을 가진 다른 자식 요소가 없는 경우입니다. :first-of-type:last-of-type와 동일합니다. CSS 3.

:empty

자식요소를 갖지 않는 요소를 선택합니다. CSS 3.

UI 요소 상태 의사 클래스 (UI element states pseudo class)

:enabled

사용자 인터페이스 요소가 사용 가능 상태인 경우입니다. CSS 3.

:disabled

사용자 인터페이스 요소가 사용 불가능 상태인 경우입니다. CSS 3.

:checked

라디오 요소 또는 체크박스 요소중 선택된 상태인 요소를 선택합니다. CSS 3.

:indeterminate

라디오 요소 또는 체크박스 요소 중 선택 여부가 결정되지 않은 상태입니다. CSS 3.

:lang

문서의 언어 별로 각각의 스타일을 지정할 수 있습니다. HTML 문서의 <meta>요소 또는 lang 속성 값, HTTP 헤더 등에 따라 문서의 언어가 결정됩니다. CSS 2.

html:lang(fr-be) {...}
html:lang(de) {...}
:lang(fr-be) > q {...}
:lang(de) > q {...}

:target

샆(#) 기호를 포함해서 문서 내의 위치를 가리키는 앵커를 타겟이라고 합니다. CSS 3.

*:target { color : red; }
*:target::before { content : url(target.png); }

:not()

부정 의사 클래스 입니다. CSS3.

button:not([DISABLED]) {...}

ID 선택자

지정된 id 속성 값을 갖는 요소를 선택합니다. id 값 앞에 샾(#)을 붙여서 표현합니다. 동일한 id는 하나의 문서안에서 반드시 하나의 요소에만 정의되어야 하므로, 선택되는 요소 또한 하나만 선택됩니다.

CSS Level: CSS 1, CSS 2, CSS 3

사용법

#chapter1 {...}
h1#chapter1 {...}

클래스 선택자

지정된 클래스의 속성값을 가지는 모든 요소를 선택합니다. 클래스명 앞에 점(.)을 붙여 표현한다.

CSS Level: CSS 1, CSS 2, CSS 3

사용법

.pastoral { color: green }
h1.pastoral { color: green }

[att]

해당 속성이 정의된 모든 요소를 선택합니다. 속성의 값과는 무관합니다.

span[class="example"]
span[hello="Cleveland"][goodbye="Columbus"]

[att=val]

해당 속성이 정의되고 그 값이 해당 값과 동일한 요소들을 선택합니다.

p[color="red"] {...}
p[text-align="center"] {...}

[att~=val]

해당 속성이 정의되고, 공백으로 구분된 값의 목록중 하나가 주어진 값과 동일한 요소들을 선택합니다.

a[rel~="copyright"] { ... }

[att|=val]

해당 속성이 정의되고 그 값이 해당 값과 동일하거나, 또는 주어진 값으로 시작하고 '-' 기호로 이어지는 값인 요소들을 선택합니다.

a[hreflang|="en"] {...}

[att^=val]

해당 속성의 값이 주어진 값으로 시작하는 요소들을 선택합니다. CSS 3.

object[type^="image/"] {...}

[att$=val]

해당 속성의 값이 주어진 값으로 끝나는 요소들을 선택합니다. CSS 3.

a[href$=".html"] {...}

[att*=val]

해당 속성의 값이 주어진 값을 부분 문자열로 가지는 요소들을 선택합니다. CSS 3.

p[title*="hello"] {...}

모든 요소에 적용되는 스타일을 정의할 경우에 별표(*)를 사용해서 선택합니다. 별표 뒤에 다른 조건이 붙는 경우에는 별표를 생략할 수 있습니다.
문맥이 혼동되지 않도록 가급적 별표를 생략하지 않는 것이 좋습니다. 예를 들어, div :first-child는 div:first-child와 다릅니다. 이 때는 div *:first-child로 표시하는 것이 좀 더 명확합니다.

CSS Level: CSS 2, CSS 3

사용법

* {background-color: white; }

*[hreflang|=en] {color: red; }
[hreflang|=en] {color: red; } /* 이것은 위와 동일한 의미입니다. */

*#myid {text-align: center; }
#myid {text-align: center; } /* 이것은 위와 동일한 의미입니다. */

타입 선택자

HTML 요소의 태그 이름을 사용해서 스타일을 지정합니다. 문서 내의 모든 해당 요소에 동일한 스타일이 적용됩니다.

CSS Level: CSS 1, CSS 2, CSS 3

사용법

h1 { font-family: sans-serif; }

그룹 선택자

한꺼번에 여러 선택자에 대해 스타일을 적용할 때에 사용합니다. 각각의 선택자를 콤마(,)로 구분해서 나열합니다.

CSS Level: CSS 1, CSS 2, CSS 3

사용법

h1, h2, h3 { font-family: sans-serif; }

페이지