CSS / 선택자(Selector)

전체 선택자

전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어

는 모든 요소의 색을 파란색으로 만듭니다.

다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉,

는 같은 결과를 만듭니다.

타입 선택자

타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다. 예를 들어

는 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다.

클래스 선택자

클래스 선택자

클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 .을 붙여 클래스임을 나타냅니다. 예를 들어

는 class 속성값으로 abc를 갖는 요소를 선택합니다.

클래스 선택자 앞에 아무 것도 없으면

클래스 선택자 앞에 아무 것도 없으면 그 값을 갖는 모든 요소를 선택합니다. 즉 .abc는 *.abc와 같은 의미로

모두 선택합니다.

클래스 선택자 앞에 무언가 있으면

클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다. 예를 들어

는 class 값으로 abc를 갖는 p 요소를 선택합니다. 이렇게 하면

은 선택되지 않고,

는 선택됩니다.

클래스 속성의 값이 여러 개이면

class 속성은 여러 개의 값을 가질 수 있습니다.

이 경우 CSS에 정의된 순서대로 적용됩니다. 예를 들어 다음의 두 문단은 모두 빨간색으로 나옵니다. CSS에서 .abc를 먼저 .xyz를 나중에 정의했기 때문입니다.

아이디 선택자

아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다. 예를 들어

는 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다.

속성선택자

속성 선택자(Attribute Selector)는 특정 속성(attribute)을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소(element)를 선택합니다. 속성선택자는 다음과 같이 7가지 형태가 있습니다.

  • [attribute]
  • [attribute=”value”]
  • [attribute~=”value”]
  • [attribute|=”value”]
  • [attribute^=”value”]
  • [attribute$=”value”]
  • [attribute*=”value”]

[attributename]

attributename 속성을 가진 요소를 선택합니다. 예를 들어

은 title 속성을 가진 h1 요소를 선택합니다.

[attributename=”value”]

attributename 속성의 값이 value인 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc인 h1 요소를 선택합니다. 주의할 점은 속성값이 정확히 일치해야 한다는 것입니다. 예를 들어

은 선택되지만,

은 선택되지 않습니다.

[attributename~=”value”]

attributename 속성의 값이 value를 포함한 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc를 포함한 h1 요소를 선택합니다. 포함 여부는 단어 기준으로 판단합니다. 예를 들어

은 선택되지만,

은 선택되지 않습니다.

[attributename|=”value”]

attributename 속성의 값이 value이거나 value-로 시작하는 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc이거나 abc-로 시작하는 h1 요소를 선택합니다.

은 선택되고,

은 선택되지 않습니다.

[attributename^=”value”]

attributename 속성의 값이 value로 시작하는 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc로 시작하는 h1 요소를 선택합니다. 단어 기준이 아니라 문자열 기준입니다. 따라서

모두 선택됩니다.

[attributename$=”value”]

attributename 속성의 값이 value로 끝나는 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc로 끝나는 h1 요소를 선택합니다. 단어 기준이 아니라 문자열 기준입니다. 따라서

모두 선택됩니다.

[attributename*=”value”]

attributename 속성의 값이 value를 포함한 요소를 선택합니다. 예를 들어

는 title 속성의 값이 abc를 포함한 h1 요소를 선택합니다. 포함 여부는 문자열 기준으로 판단합니다. 따라서

모두 선택됩니다.

CSS Level 3

다음 세 선택자는 CSS3에서 추가된 것입니다.

  • [attribute^=”value”]
  • [attribute$=”value”]
  • [attribute*=”value”]

CSS3를 지원하지 않는 웹브라우저에서는 적용되지 않습니다.

하위 선택자

하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택합니다. 예를 들어

는 div 요소의 하위에 있는 blockqoute 요소를 선택합니다. 이때 div와 blockquote 사이에 요소가 더 있어도 선택이 됩니다. 즉

일 때도 blockquote를 선택하고,

일 때도 blockquote를 선택합니다.

자식 선택자

자식 선택자(Child Selector)는 특정 요소의 자식 요소를 선택합니다. 예를 들어

는 div 요소의 자식 요소 중 blockqoute를 선택합니다. 주의할 점은 한단계 아래에 있는 요소만 선택한다는 것입니다. 즉

일 때는 blockquote를 선택하지만

일 때는 blockquote를 선택하지 않습니다.

형제 선택자

형제 선택자(Sibling Selector)는 어떤 요소의 형제 요소를 선택하는 선택자입니다. 예를 들어

는 h1 요소의 형제 요소 중 p 요소를 선택합니다.

인접 형제 선택자

인접 형제 선택자(Adjacent Sibling Selector)는 어떤 요소의 형제 요소 중 첫번째 요소를 선택합니다. 예를 들어

는 h1 요소의 형제 요소 중 첫번째 p 요소를 선택합니다.

가상 요소

가상 요소

가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다.

  • ::first-line
  • ::first-letter
  • ::before
  • ::after

가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 씁니다. 하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동합니다.

::first-line

::first-line은 요소의 첫번째 줄을 선택합니다. 예를 들어

는 p 요소의 첫번째 줄의 글자색을 빨간색으로 만듭니다.

::first-letter

::first-letter는 요소의 첫번째 문자를 선택합니다. 예를 들어

는 p 요소의 첫번째 문자의 색을 빨간색으로 만듭니다.

::before

::before는 요소의 앞을 선택합니다. 예를 들어

는 p 요소 앞에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.

::after

::after는 요소의 뒤를 선택합니다. 예를 들어

는 p 요소 뒤에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.

가상 클래스

:empty

:empty는 내용이 없는 비어있는 요소를 선택합니다. 예를 들어

는 li 요소 중 내용이 없는 것을 선택합니다. 즉

가 선택됩니다. 공백도 내용이 있는 것으로 봅니다. 따라서

처럼 빈 칸이 있는 것은 선택되지 않습니다.

:first-child

:first-child는 형제 요소 중 첫번째 요소를 선택합니다.

:hover

:hover는 요소에 마우스를 올린 상태를 선택합니다. 예를 들어

는 p 요소에 마우스를 올렸을 때 글자색을 빨간색으로 만듭니다. 마우스를 다른 곳으로 이동하면 원래 모양으로 돌아옵니다.

:nth-child

:nth-child는 형제 요소 중에서 규칙을 만족하는 요소를 선택할 때 사용합니다. 그 규칙은 등차수열입니다. 즉, 일정한 간격으로 요소를 선택할 수 있습니다. 그 간격을 0으로 정하면 특정 위치에 있는 요소만 선택할 수도 있습니다.

형제 요소 중에서 an+b번째 있는 요소를 선택합니다. an+b에서 a와 b는 정수입니다. n에는 0, 1, 2, 3, …이 차례대로 입력됩니다.

예를 들어 3n+2로 정하면

3 × 0 + 2 = 2, 3 × 1 + 2 = 5, 3 × 2 + 2 = 8, 3 × 3 + 2 = 11, …

이므로 2로 시작해서 3씩 커지는 2, 5, 8, 11, 14, 17, 20, …이 됩니다.

a를 음수로 정하면 선택하는 요소의 개수를 정할 수 있습니다.

n이 0일 때 5, n이 1일 때 3, n이 2일 때 1이므로, 세 개의 홀수번째 요소가 선택됩니다.

a가 0이면 n에 어떤 값이 들어가도 b입니다. 0n+b라고 해도 되고, 그냥 b만 써도 됩니다.

위와 같이 하면 5번째 요소가 선택됩니다.

an+b 대신에 odd을 쓰면 홀수번째 요소가, even을 적으면 짝수번째 요소가 선택됩니다.

li.jb:nth-child( odd )라고 했을 때 해석에 주의합니다. jb를 클래스 값으로 가지는 li 요소 중 홀수번째 요소를 선택하는 것이 아니라, li 요소의 홀수번째 요소 중 jb를 클래스 값으로 가지는 요소를 선택합니다.