고급 선택자

소개

CSS 기본 강좌에서, 기본적인 CSS 선택자의 대부분을 소개했다: 요소, class 및 id 선택자. 이 선택자를 가지고 많은 것을 할 수 있다. 그러나 이것은 선택자의 완전한 목록은 아니다 – 더 구체적인 기준으로 요소를 선택할 수 있는 다른 선택자들이 있다. 이 강좌에서 고급 선택자의 대부분을 설명한다.

참고: 이 강좌는 고급 선택자의 “대부분”을 다룬다. 가장 현대적인 브라우저들이 CSS3 selectors module 에서 열거한 모든 선택자를 지원하지만, 새로운 선택자들이 계속 추가되고 수정되고 있기 때문에 — 업데이트를 위해 CSS4 selectors draft 를 계속 체크하고 있다.

이 강좌를 읽을 때, 이 강좌에서 사용된 많은 선택자들을 볼 수 있다. 그것들 모두를 즉시 이해하지 못하더라도 걱정하지 말자: 필요할 때 이 강좌를 계속 참조하자.

전체 선택자 (Universal selectors)

전체 선택자는 페이지의 모든 요소를 선택한다. 예를 들어, 다음 규칙은 페이지의 모든 요소에 1픽셀의 검은색 경계를 표시한다:

속성 선택자 (Attribute selectors)

속성 선택자는 요소가 포함하는 속성을 기반으로 요소를 선택할 수 있다. 예를 들어, 다음 선택자를 사용하여, alt 속성을 가지고 있는 모든 <img> 요소를 선택할 수 있다:

위의 예에서 대괄호를 확인한다.

위의 선택자를 사용하여, alt 속성을 가지고 있는 모든 이미지 주위에 검은색 경계를 추가할 수 있다 – 이것은 접근성 테스트에 매우 유용한 기술이다

속성 값을 가지고 선택 (Selecting by attribute value)

속성 선택자는 속성 이름이 아닌 속성 값 을 가지고 선택하고자 할 때 더 유용하다. 다음 규칙은 src 속성 값으로 alert.gif 를 가지고 있는 모든 이미지를 선택한다:

다시 이 스타일은 디버깅 목적에 유용하다. 또한 중요한 아이콘 또는 링크에, 추가적인 클래스와 ID를 요구하지 않고, 스타일을 적용할 때 사용할 수 있다.Again this style is useful for debugging purposes. You can also use it to style important icons or links without requiring additional classes and IDs.

이 코드는 IE6 이하 버전에서 지원하지 않는다.

속성 값에서 문자열을 기준으로 선택 (Selecting based on substrings within the attribute value)

이것이 속성 선택자가 훨씬 더 유용한 부분이다. 시작하려면, 다음 규칙으로 <img src="alert.gif"> 요소를 선택하여 스타일을 적용할 수 있다:

^ 문자는 src 속성 값의 처음에 문자열 alert 를 포함하는 경우에만, 이 선택자가 <img> 요소에 영향을 미치게 한다.

또한 이 규칙을 사용하여 <img src="alert.gif"> 요소를 선택할 수 있다:

$ 문자는 src 속성 값 끝에 문자열 gif 를 가지고 있는 경우에만, 이 선택자가 <img> 요소를 선택하도록 지시한다. 이것은 특정 형태의 대상, PDF 파일 또는 워드 문서, 을 가리키는 링크에 스타일을 적용하기에 정말로 유용하다.

마지막으로, 이와 같이 <img src="alert.gif"> 요소를 선택할 수 있다:

* 문자는 src 속성 값의 어디에든 문자열 ert 를 가지고 있는 경우에만, <img> 요소에 영향을 미치게 한다.

주의: 이 고급 선택자는 IE8 이하 버전에서는 지원하지 않는다.

속성 값에서 구분된 항목을 기준으로 선택 (Selecting based on delimited items within the attribute value)

페이지 많은 클래스가 적용된 한 요소를 가지고 있다면, 예를 들어:

다음 선택자 중의 하나를 사용하여 선택할 수 있다:

~ 문자는, 값들 중의 하나가 인용부호 안의 값과 같은 경우에만, 이 선택자가 class 속성 값이 공백으로 분리된 값 항목 중의 하나와 같은 <article> 요소를 선택하도록 지시한다.

다음으로, 페이지에서 하이픈으로 구분된 항목 형식으로 ID 값을 가진 요소를 살펴보자:

다음 선택자를 사용하여 선택할 수 있다:

| 문자는, 왼쪽 끝의 값이 english 인 경우에만, 이 선택자가 id 속성 값이 하이픈으로 구분된 값의 항목 중의 하나와 같은 <article> 요소를 선택하도록 지시한다.

주의: 이 선택자는 IE8 이하 버전에서 지원하지 않는다.

자식 선택자 (child selector)

다른 요소의 자식인 요소를 선택하려면 자식 선택자를 사용할 수 있다. 예를 들면, 다음 규칙은 <h3> 요소의 자식인 <strong> 요소의 텍스트를 파란색으로 바꾼다. 다른 <strong> 요소에는 영향을 미치지 않는다:

주의: 자식 선택자는 IE6 이하 버전에서는 지원되지 않는다.

> 문자는 이 구문에서 종종 연결자 ( combinator)라고도 한다 — 이것은 여러 요소를 하나의 선택자로 결합한다.

후손 선택자(Descendent selector)

후손 선택자는 자식 선택자와 비슷하다. 자식 선택자는 직계 후손을 선택한다는 점만 다르다; 후손 선택자는 직계 후손 뿐 아니라, 요소 계층상 어디 있든지 일치하는 요소를 선택한다. 다음 HTML 코드를 보고 이것이 무엇을 의미하는지 살펴보자:

이 코드에서, <div> 요소는 모든 요소의 부모이다. 이것은 두 자식이 있다. <p><article> 이다. <article> 요소는 다른 하나의 자식이 있다: 또 하나의 <p>.

<div> 바로 아래 <p> 만을 선택하기 위해 자식 선택자를 사용할 수 있다. 다음과 같다:

대신 후손 선택자를 사용하면, 다음과 같다:

그러면 두 개의 <p> 요소가 선택된다.

인접 형제 선택자 (Adjacent sibling selector)

이 선택자는 다른 요소 바로 뒤에 오는 특정 요소를 선택한다. 요소 계층상 같은 수준에 있는 요소이다. 다음 예제를 살펴보자:

<h2> 요소 바로 뒤에 오는 <p> 요소 만을 선택하기를 원한다면 (문서에서 나중에 나타날 수 있는 다른 <p> 요소), 다음과 같은 규칙을 사용할 수 있다:

주의: 인접 형제 선택자는 IE6 이하 버전에서는 지원하지 않는다.

+ 문자는 이 구문에서 종종 연결자라고 한다 — 이것은 여러 개의 요소를 하나의 선택자로 결합한다는 사실도 주의하자.

일반 형제 선택자

일반 형제 선택자는 인접 형제 선택자로 매우 비슷하다. 왼쪽 바로 옆에 있는 요소만 아니고, 특정 요소 형식의 모든 형제들을 선택한다는 점이 다르다. CSS 구문은 다음과 같다:

앞의 예제로 돌아가면, 이 규칙은 5개의 모든 문단을 선택한다, 첫 번째 요소만 아니다. 이것은 아래의 문단도 선택할 것이다:

주의: 일반 형제 선택자는 IE8 이하 버전에서는 지원하지 않는다.

~ 문자는 이 구문에서 종종 연결자라고 한다 — 이것은 여러 개의 요소를 하나의 선택자로 결합한다는 사실도 주의하자.

가상 클래스 (Pseudo-classes)

가상 클래스는 요소가 아닌, 다양한 상태에 있는 요소에 대해 스타일을 적용하기 위해 사용된다.

링크와 사용자 행동 가상 클래스 (Link and user action pseudo-classes)

링크 상태에 스타일을 적용하기 위해 사용되는 것에서 가장 일반적인 가상 클래스를 알 수 있다. (이것들은 Styling lists and links 에 모든 사용 방법이 설명되어 있다):

  • :link — 링크의 일반적인, 기본 상태 , 브라우저에서 페이지가 처음 로드될 때 표시된다.
  • :visited — 현재 사용하고 있는 브라우저에서 이미 방문한 적이 있는 링크를 선택한다.
  • :focus — 현재 안에 텍스트 표시자(커서의 위치)를 가지고 있는 링크를 선택한다.
  • :hover — 현재 커서가 위에 놓여져 있는 링크를 선택한다.
  • :active — 현재 클릭이 되어 있는 링크를 선택한다.

위에서 마지막 세 개의 항목(“사용자 행동 가상 클래스”라 하고 – 처음의 두 개 항목은 링크 가상 클래스라 한다)은 요소의 상태에 스타일을 적용하기 위해 사용된다는 사실에 주목하자. 이것은 종종 사용자 인터페이스에 스타일을 적용할 때 사용된다. 예를 들어, 폼 입력 필드가 탭으로 선택될 때 다른 스타일을 설정할 수 있다. 또는 정보 상자는 커서가 화면의 특정 지역에 커서가 올려질 때만 나타날 수 있다.

다음 예제을 확인하자. 아래의 CSS 규칙은 파란색 링크를 표시하기 위해 링크에 스타일을 적용한다 (어쨌든 이것은 대부분의 브라우저에서 기본 링크 스타일이다). 커서가 올려지면 링크의 밑줄이 사라진다. 키보드로 링크에 포커스될 때 같은 효과를 내기 위해, :hover 규칙이 :focus 선택자에 복제된다. 링크가 이미 방문한 적이 있으면, 회색으로 변한다. 마지막으로, 링크가 활성화되면, 굵은 글꼴이 된다. 방문자에게 중요한 일이 일어났다는 추가 단서이다.

위와 같은 순서로 이 규칙을 지정하도록 한다. 이렇게 하지 않으면, 기대하는대로 작동하지 않을 수 있다. 구체성 측면에서, 스타일 시트에 나중에 오는 규칙이 이전의 규칙을 재정의하기 때문이다. 구체성은 Inheritance and cascade 강좌에서 더 자세히 다룬다.

다른 예제로, :focus 가상 클래스는 폼의 사용성을 도와 주는 것으로도 유용하다. 예를 들어, 입력 필드를 밝게 강조할 수 있다. 이 규칙으로 필드에서 커서가 깜박이게 한다:

부정 가상 클래스 (The negation (not) pseudo-class)

부정 가상 클래스는 간단한 선택자로 선택되지 않는 요소에 분명하게 스타일을 적용하기 위해 사용된다. 예를 들면, 많은 내용의 블록(하나를 제외한 모든 블록)에 일부 스타일을 적용한다고 상상하자. 블록은 아래와 같다:

이 규칙으로, references를 제외한 모든 섹션에 스타일을 적용할 수 있다.

또는 대신에 이와 같이 부정 선택자를 사용할 수 있다:

이것이 훨씬 간단하고 읽기 쉽다.

주의 : 이 부정 선택자는 IE8 버전 이하에서는 적용되지 않는다.

언어 가상 클래스 (The language (lang) pseudo-class)

:lang 가상 클래스는 lang 속성을 사용하여 해당 언어가 특정 언어로 설정되는 요소를 선택한다. 예를 들면, 다음 HTML 요소: selects elements whose languages have been set to the specified language using the attribute. For example, the following HTML element:

다음을 사용하여 선택할 수 있다:

목표 대상 가상 클래스 (The target pseudo-class)

목표 대상 가상 클래스는 해당 요소가 현재 페이지 URL의 목표 대상(target)이라면, 그 요소를 선택할 수 있다. 이것은 정말로 유용하고, 멋진 효과를 낼 수 있다. 링크를 클릭할 때 적용하는 스타일을 효과적으로 설정할 수 있기 때문이다. 예를 들면:

이것은 뒤에 <div> 가 있는 간단한 링크로 수행할 수 있다 – 링크는 이것의 ID를 가지고 <div> 를 참조한다. 현재 URL은 링크를 클릭할 때 <div>를 목표 대상으로만 한다. 링크를 클릭할 때만 <div> 에 스타일을 적용하기 위해서는, 다음 규칙을 사용할 수 있다:

:target 사용법이 적용된 더 많은 예제는 Corey Mwamba의 CSS3 target-based interfaces 글을 참조하자.

UI 요소 상태 가상 클래스 (UI element state pseudo-classes)

이 가상 클래스는 UI 요소의 고급 상태에 스타일을 적용하는 모든 것과 관련이 있다. 이것은 HTML 폼 요소에 스타일을 적용할 때 가장 일반적으로 사용된다. 특히 HTML5 폼의 새로운 기능 중 일부가 사용될 때 사용된다. 유효성 검증에서 만들어진 것과 같은(such as built in validation) 경우이다. (더 자세한 내용은 [HTML5 form additions] 참조.)

유효성 검증을 위해 valid 속성으로 기본 폼 입력란에 스타일을 적용한다고 상상하자:

입력된 정보가 두 가지 규칙을 사용하여 유효하거나 (valid) 또는 잘못된 (invalid) 경우에만 스타일을 적용할 수 있다.:

그 밖에 사용가능 (기본) (enabled) 또는 사용 불능 (disabled)(disabled 속성 사용) 인 가에 따라 스타일을 적용할 수 있다. 이 스타일:

과 이 스타일을 사용한다:

마지막으로, 체크되었을 때만 체크 박스에 스타일을 적용할 수 있다. 이와 같다:

구조 가상 클래스 (Structural pseudo-classes)

구조 가상 클래스는 문서 계층상의 위치에 기반한 요소를 목표 대상으로 할 수 있는 고급 선택자이다. 이것은 CSS3에 소개되었었다. 그리고 이것들은 전에 논의된 인접 형제 선택자와 같은 선택자 위에 만들어진다.

:root 문서의 루트 요소를 선택한다. 이것은 보통 <html> 요소이다. 예를 들면, 이 규칙:

<p>:nth-child(n) 은 계속되는 비슷한 요소 안에서 반복되는 요소의 패턴을 선택할 수 있게 한다. 여러 개의 리스트 항목, 여러 개의 단락, 기사 다음의 또 다른 기사들과 같은 요소들안에서 말이다. 이 예제를 살펴보자:

n 은 선택하기를 원하는 패턴을 위해 설정된다. 이 경우에, 리스트 항목을 선택하기 위해, 이 코드를 사용한다:

홀수 또는 짝수 리스트를 선택하기 위해, 이 규칙을 추가한다:

또는 같은 결과를 얻기 위해 이 규칙을 사용할 수 있다:

다른 공식 예제를 살펴보자:

  • li:nth-child(5): 다섯 번째 옆에 있는 리스트 항목을 선택한다.
  • li:nth-child(4n+1): 매 네째 리스트 항목을 선택하고, 그 결과에 1을 더한다. 그러면 숫자 5와 9.
  • li:nth-child(3n-2): 매 셋째 리스트 항목을 선택하고, 그 결과에서 2를 뺀다. 그러면, 숫자 1, 4, 7.

그 밖에 nth-last-child(n) 를 사용할 수 있다. 이것은 nth-child(n) 과 같은 일을 한다. 그러나 순서의 첫 번째 요소가 아닌 마지막 요소에서 계산된다.

nth-of-type(n)nth-last-of-type(n) 은 accomplish almost exactly the same goals as nth-child(n)nth-last-child(n) 과 거의 똑같은 일을 한다. 그러나 중요한 차이점이 하나 있다: 전자의 두 개는 자식 번호가 아닌 요소의 유형으로 선택하기 때문에, 비슷한 요소의 반복 배열로 산재된 독자적으로 행동하는 (rogue) 모든 요소를 무시한다. 후자는 자식 번호로 선택한다.

여기 또 다른 예제가 있다:

이 예제에 여덟 개의 자식 <article> 요소를 가지고 있는 <element> 가 있다. 그리고 하나의 <blockquote> 요소가 중앙에 있다: 이것은 자식 번호가 6이다. 여기에는 전체 9개의 자식 요소가 있다.

선택자로 <div>의 짝수 번째 자식들을 선택하기 위해, article:nth-child(2n+0) 을 사용한다면, 2, 4 8 번 <article> 만 선택될 것이다: <blockquote> (6 번 위치) 는 <article> 이 아니기 때문에 선택되지 않을 것이다.

선택자로 article:nth-of-type(2n+0) 을 사용한다면, 2, 4, 7, 9 번 <article> 을 선택할 수 있다: 자식의 위치가 아닌, 요소의 유형으로 선택하기 때문에 가능하다. 그러므로 이 경우에, <blockquote> 는 완전히 무시되고 짝수 번호의 <article> 이 선택된다. 그렇다. 그들 중 둘은 처음의 번호 체계에서 홀수 번호이다. 실제로 <blockquote> 이 존재하고 위치를 대신 차지하고 있기 때문이다. 그러나 article:nth-of-type(2n+0)<blockquote> 를 무시하고, 효과적으로 7 과 9 를 6 과 8 로 계산한다.

다음으로, :first-child:last-child 선택자를 살펴보자 — 이 가상 선택자는 한 요소의 첫 번째 또는 마지막 경우(instance)만 선택한다. 이것은 그 부모의 첫 째 또는 마지막 요소이다. 그래서, 위의 예제를 다시 고려하여, <article> 요소의 첫 번째 및 마지막을 각각 선택하기 위해 다음 규칙을 사용할 수 있다:

blockquote:first-child 은 아무 것도 선택하지 않는다. 첫 번째 자식은 <blockquote> 이 아니기 때문이다.

first-of-typelast-of-type 는 매우 비슷한 방법으로 다시 작동한다. 그러나 자식의 위치가 아닌, 요소의 유형을 기초로 선택한다. 그래서 article:first-of-typearticle:first-child와 정확하게 같은 <article> 요소를 선택한다. 그러나 예제에서 blockquote:first-of-type 는 하나의 <blockquote> 만을 선택한다. 왜냐하면 6번째 자식이지만, 그 유형의 첫 번째이기 때문이다.

몇 가지 다른 것들을 고려해야 한다:

  • only-child: 부모의 자식이 하나만 있을 경우에만 요소를 선택한다. 예제에서 선택자 article:only-child 는 아무 것도 선택하지 않는다. <article> 자식이 하나 이상이기 때문이다.
  • only-of-type: 부모 요소 안에 그 유형의 형제가 하나만 있을 경우에만 요소를 선택한다. 그래서 위 예제에서 blockquote:only-of-type<blockquote> 를 선택한다. 이 유형이 하나만 있기 때문이다.
  • empty: 자식이 전혀 없을 경우(텍스트 노드 포함)에만 요소를 선택한다. 예를 들면, div:empty<div></div> 를 선택한다. 그러나<div>1</div> 또는 <div><p>Hi!</p></div> 의 경우는 아니다.

가상 요소 (Pseudo-elements)

가상 요소는 요소의 상태를 선택하지 않는다는 점에서 가상 클래스와 다르다; 이것은 요소의 부분을 선택한다.

 :first-letter

다음 규칙을 사용하여 주어진 요소 안의 첫 번째 문자를 선택한다:

모든 단락의 첫 번째 문자는 굵은 글씨이고, 문단의 다른 것보다 300% 크고, 빨간색 배경을 가진다. 이것은 괜찮은 드롭 캡 효과 (drop cap effect)를 만드는 좋은 출발점이다.

 :first-line

모든 문단의 첫 번째 행을 굵은 글씨로 하려면, 다음 규칙을 사용할 수 있다:

 :before 과  :after 를 사용하여 만들어진 내용

:before:after 가상 요소를 사용하여 선택된 요소의 앞 및 뒤에 내용이 삽입되도록 할 수 있다. 그리고 삽입하거나 또는 생성할 내용을 지정한다. 예를 들어, 페이지의 모든 링크 뒤에 장식 이미지를 삽입하기 위해 다음 규칙을 사용할 수 있다:

그 밖에 요소 뒤에 요소의 속성 값을 삽입하기 위해 attr() 함수를 사용할 수 있다. 예를 들면, 다음 규칙으로 문서에 있는 각각의 모든 링크 다음 괄호 안에 링크의 목표 대상(target)을 삽입할 수 있다:

이것은 인쇄 스타일 시트에 사용하기 훌륭한 기술이다. 인쇄 스타일 시트에서 문서의 URL을 텍스트 링크 뒤에 숨기기 보다는 표시하는 것이 중요하다 (이것은 출력된 페이지에서는 필요 없다).

글머리 기호 또는 단락과 같이 반복적인 요소 뒤에 counter() 함수를 사용하여 증가하는 수치를 삽입할 수 있다. 이것은 David Storey의 [Automatic numbering with CSS counters] 에서 훨씬 더 자세히 설명된다.

이 선택자는 IE 7 이하 버전에서는 지원되지 않는다. 그 밖에 CSS로 중요한 정보를 삽입하지 않도록 주의하자. 그 내용이 보조 기술로 사용할 수 없을 것이기 때문이다. 방문자가 스타일 시트를 사용하지 않는 것으로 설정하였다면, 또한 사용할 수 없다. 황금 규칙은 CSS 규칙은 스타일링을 위한 것이다; HTML은 중요한 내용을 표시하기 위한 것이다.

CSS3 가상 요소 더블 콜론 구문 (CSS3 pseudo-element double colon syntax)

가상 요소를 작성하는 새로운 CSS3 방법으로 가상 클래스와 구분하기 위해 a::after { … } 와 같이 더블 콜론을 사용하는 것을 주목하자. CSS에서 이것을 가끔 볼 수도 있다. 그러나 CSS3에서는 이전 버전과의 호환성을 위해 싱글 콜론 가상 요소도 여전히 인정하고 있다. 얼마 동안은 싱글 콜론 구문을 계속 사용하기 바란다.

답글 남기기