CSS 속성 선택자 상세 설명

CSS 2는 속성 선택자를 도입했습니다.

속성 선택자는 요소의 속성 및 속성 값을 기준으로 요소를 선택할 수 있습니다.

간단 속성 선택자

특정 속성을 가진 요소를 선택하고 싶다면, 속성 값이 무엇인지 관계없이 간단 속성 선택자를 사용할 수 있습니다.

예제 1

제목(title)이 포함된 모든 요소를 빨간색으로 만들고 싶다면 다음과 같이 작성할 수 있습니다:

*[title] {color:red;}

직접 시험해 보세요

예제 2

위와 유사하게, href 속성을 가진 앵커(a 요소)에만 스타일을 적용할 수 있습니다:

a[href] {color:red;}

직접 시험해 보세요

예제 3

여러 가지 속성에 따라 선택할 수 있습니다. 속성 선택자를 연결하여만 됩니다.

예를 들어, href와 title 속성을 모두 가진 HTML 하이퍼링크 텍스트의 색상을 빨간색으로 설정하려면 다음과 같이 작성할 수 있습니다：

a[href][title] {color:red;}

직접 시험해 보세요

예제 4

이 특성을 창의적으로 사용할 수 있습니다。

예를 들어, alt 속성을 가진 모든 이미지에 스타일을 적용하여 이러한 유효한 이미지를 강조할 수 있습니다：

img[alt] {border: 5px solid red;}

직접 시험해 보세요

ヒント:위의 특례는 진단보다는 설계에 더 적합합니다. 즉, 이미지가 실제로 유효한지 확인하는 데 사용됩니다。

예제 5: XML 문서에 속성 선택자 사용

속성 선택자는 XML 문서에서 매우 유용합니다. 왜냐하면 XML 언어는 요소와 속성의 용도를 명시하는 것이 좋다고 주장하기 때문입니다。

우리가 태양계 행성을 설명하는 XML 문서를 설계했다고 가정해 보겠습니다. moons 속성을 가진 모든 planet 요소를 선택하여 빨간색으로 표시하여 moons를 가진 행성에 더 집중하고 싶다면 다음과 같이 작성할 수 있습니다：

planet[moons] {color:red;}

이는 다음 태그 부분의 두 번째와 세 번째 요소의 텍스트를 빨간색으로 표시하지만 첫 번째 요소의 텍스트는 빨간색이 아닙니다：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

효과를 확인해 보세요

특정 속성 값에 따라 선택

특정 속성을 가진 요소를 선택하는 것 외에도, 특정 속성 값을 가진 요소만 선택할 수 있습니다。

예제 1

예를 들어, 웹 서버에 있는 특정 문서로 가는 하이퍼링크를 빨간색으로 만들고 싶다면 다음과 같이 작성할 수 있습니다：

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

직접 시험해 보세요

예제 2

간단한 속성 선택자와 유사하게, 여러 속성-값 선택자를 연결하여 문서를 선택할 수 있습니다。

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

이를 통해 다음 태그 중 첫 번째 하이퍼링크 텍스트를 빨간색으로 만들지만 두 번째나 세 번째 링크는 영향을 받지 않습니다：

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

직접 시험해 보세요

예제 3

XML 언어도 이 방법을 통해 스타일을 설정할 수 있습니다.

그렇다면, 행성 예제로 돌아가 보겠습니다. moons 속성 값이 1인 planet 요소만 선택하고 싶다면:

planet[moons="1"] {color: red;}

위의 코드는 다음 태그의 두 번째 요소를 빨간색으로 만들지만, 첫 번째와 세 번째 요소는 영향을 받지 않습니다:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

효과를 확인해 보세요

속성과 속성 값은 완전히 일치해야 합니다.

이 형식은 속성 값과 완전히 일치해야 합니다.

속성 값이 공백으로 구분된 값 목록을 포함하면 일치 문제가 발생할 수 있습니다.

다음과 같은 태그 부분을 고려해 보세요:

<p class="important warning">이 문단은 매우 중요한 경고입니다.</p>

p[class="important"]로 작성하면 이 규칙은 예제 표시기와 일치하지 않습니다.

특정 속성 값에 따라 요소를 선택하려면 반드시 이렇게 작성해야 합니다:

p[class="important warning"] {color: red;}

직접 시험해 보세요

부분 속성 값 선택

속성 값의 단어 목록의 특정 단어를 기준으로 선택을 하려면 와이벨론(~)을 사용해야 합니다.

class 속성에 important를 포함한 요소를 선택하려면 다음 선택자를 사용할 수 있습니다:

p[class~="important"] {color: red;}

직접 시험해 보세요

와이벨론을 무시하면 완전한 값 일치가 필요합니다.

부분 값 속성 선택자와 점号 클래스 이름 기법의 차이점

이 선택자는 우리가 클래스 선택자에서 논의한 점号 클래스 이름 기법과 동일합니다.

그这么说来，p.important과 p[class="important"]는 HTML 문서에 적용될 때 동일합니다.

그렇다면, "~=" 속성 선택자가 왜 필요한지요? 그것은 class 이 아니라 어떤 속성에도 사용할 수 있습니다.

예를 들어, 많은 이미지를 포함한 문서가 있지만 그 중 일부만이 이미지인 경우가 있습니다. 이를 위해 title 문서의 일부 속성 선택자를 사용하여 이러한 이미지만 선택할 수 있습니다:

img[title~="Figure"] {border: 1px solid gray;}

이 규칙은 title 텍스트에 "Figure"가 포함된 모든 이미지를 선택합니다. title 속성이 없는 이미지나 title 속성에 "Figure"가 포함되지 않은 이미지는 일치하지 않습니다.

직접 시험해 보세요

부분 일치 속성 선택자

CSS2가 완료된 후 출시된 더 고급한 선택자 모듈을 소개합니다. 이 모듈은 더 많은 부분 값 속성 선택자를 포함하고 있습니다. 규범적으로는 '부분 일치 속성 선택자'라고 불립니다.

많은 현대 브라우저는 이러한 선택자를 지원하며, IE7도 포함됩니다.

다음 표는 이러한 선택자의 간단한 요약입니다:

유형 설명
[abc^="def"] abc 속성 값이 "def"로 시작하는 모든 요소를 선택합니다
[abc$="def"] abc 속성 값이 "def"로 끝나는 모든 요소를 선택합니다
[abc*="def"] abc 속성 값에 "def" 서브 스트링이 포함된 모든 요소를 선택합니다

이러한 선택자는 많은 용도가 있을 수 있습니다.

예를 들어, CodeW3C.com에 링크된 모든 링크에 스타일을 적용하려면, 모든 이 링크에 class를 지정하고 해당 클래스에 스타일을 작성하는 대신 다음 규칙만 작성하면 됩니다:

a[href*="codew3c.com"] {color: red;}

직접 시험해 보세요

ヒント:모든 속성을 이러한 선택자로 사용할 수 있습니다.

특정 속성 선택 타입

특정 속성 선택자를 마지막으로 소개합니다. 다음 예제를 보세요:

*[lang|="en"] {color: red;}

위의 규칙은 lang 속성이 en이거나 en-으로 시작하는 모든 요소를 선택합니다. 따라서 다음 예제 태그의 처음 세 요소가 선택되고, 마지막 두 요소는 선택되지 않습니다:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

직접 시험해 보세요

대체로 [att|="val"]는 어떤 속성과 값에도 사용할 수 있습니다.

HTML 문서에 여러 장의 이미지가 있고, 각 이미지의 파일 이름이 다음과 같은 형식을 가정해 보겠습니다: figure-1.jpg 및 figure-2.jpg다음 선택자를 사용하여 모든 이러한 이미지를 일치시킬 수 있습니다:

img[src|="figure"] {border: 1px solid gray;}

직접 시험해 보세요

물론, 이러한 선택자의 가장 일반적인 사용은 언어 값을 일치시키는 데 있습니다.

CSS 선택자 참조 매뉴얼

선택자 설명
[attribute] 지정된 속성을 가진 요소를 선택하는 데 사용됨.
[attribute=value] 지정된 속성과 값을 가진 요소를 선택하는 데 사용됨.
[attribute~=value] 속성 값에 지정된 단어가 포함된 요소를 선택하는 데 사용됨.
[attribute|=value] 지정된 값으로 시작하는 속성 값을 선택하는 데 사용됨, 이 값은 전체 단어여야 합니다.
[attribute^=value] 지정된 값으로 시작하는 속성 값에 대한 모든 요소에 대한 매칭
[attribute$=value] 지정된 값으로 끝나는 속성 값에 대한 모든 요소에 대한 매칭
[attribute*=value] 지정된 값이 포함된 모든 속성 값에 대한 매칭