속성 선택자는 요소의 속성에 따라 선택하는 특별한 선택자입니다. 일반적인 구문은 대괄호([])와 그 안의 속성 이름으로 이루어지며 선택적으로 속성 값에 따른 조건을 붙일 수 있습니다. 속성 선택자는 두 종류, 존재와 값 속성 선택자와 부분일치 선택자로 나눌 수 있습니다.

존재와 값 속성 선택자

다음 속성 선택자는 속성 이름과 그 값이 자신과 일치하는 요소를 선택합니다.

  • [attr] : 속성 attr이 존재하면 값과 상관 없이 선택합니다.
  • [attr=val] : 속성 attr이 존재하되 값이 val이어야 선택합니다.
  • [attr~=val]: 속성 attr이 존재하되 공백으로 구분한 값 목록에 val이 있어야 선택합니다.

예제를 살펴보겠습니다.

레시피 재료: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>토마토</li>
  <li data-quantity="3" data-vegetable>양파</li>
  <li data-quantity="3" data-vegetable>마늘</li>
  <li data-quantity="700g" data-vegetable="약간 매움">홍고추</li>
  <li data-quantity="2kg" data-meat>닭고기</li>
  <li data-quantity="선택사항 150g" data-meat>베이컨 조각</li>
  <li data-quantity="선택사항 10ml" data-vegetable="액체">올리브유</li>
  <li data-quantity="25cl" data-vegetable="액체">백포도주</li>
</ul>

스타일 시트입니다.

/* "data-vegetable" 속성을 가진 모든 요소는 초록색 */
[data-vegetable] {
  color: green;
}

/* "data-vegetable" 속성을 가지고,
   값이 "액체"면 배경 황금색 */
[data-vegetable="액체"] {
  background-color: goldenrod;
}

/* "data-vegetable" 속성을 가지고,
   "매움" 값이 목록에 들어가있으면 있으면 빨간색 */
[data-vegetable~="매움"] {
  color: red;
}

결과는 다음과 같습니다.

참고: 예제의 data-* 속성은 데이터 속성이라고 부르며 HTML에 사용자 설정 데이터를 저장하는 방법을 제공합니다. 데이터 속성 사용하기를 참고하세요.

부분일치 속성 선택자

부분일치 속성 선택자는 정규표현식과 비슷하게 유연한 선택을 제공하므로 "유사 정규표현 선택자"로도 알려져 있습니다. (물론 진짜 정규표현식은 아닙니다)

  • [attr^=val] : 속성 attr의 값이 val로 시작하면 선택합니다.
  • [attr$=val] : 속성 attr의 값이 val로 끝나면 선택합니다.
  • [attr*=val] : 속성 attr의 값이 부분문자열 val을 포함하면 선택합니다. (부분문자열은 그냥 문자열의 부분입니다. 예: "cat"은 "caterpillar"의 부분문자열) 

참고: 첫 번째 옵션의 아주 특별한 버전도 있습니다. [attr|=val] 선택자는 속성 attr의 값이 정확히 val이거나 val-로 시작(대시-는 오타가 아닙니다)하면 선택합니다. 이 선택자는 언어 코드(예: lang="en" 또는 lang="en-US")를 선택하기 위한 용도로 도입됐고, 아마 평소에 쓸 일은 별로 없을겁니다.

앞의 예제에 다음 CSS 규칙을 추가해보겠습니다.

/* 고전적인 언어 선택 */
[lang|="fr"] {
  font-weight: bold;
}

/* "data-quantity" 속성의 값이 "선택사항"으로 시작하는 경우 */
[data-quantity^="선택사항"] {
  opacity: 0.5;
}

/* "data-quantity" 속성의 값이 "kg"으로 끝나는 경우 */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* "data-vegetable" 속성 값이 "약간 매움"을
   부분문자열로 포함하면 다시 초록색 */
[data-vegetable*="약간 매움"] {
  color: green;
}

새로운 CSS 규칙의 결과는 다음과 같습니다.

실습: 축구 결과 꾸미기

이번 실습에서는 속성 선택자를 직접 추가해서 간단한 축구 결과 리스트를 꾸며보세요. 세 가지 과제가 있습니다.

  • 처음 세 개 규칙은 리스트 항목의 왼쪽에 영국, 독일, 스페인 국기 아이콘을 추가합니다. 속성 선택자를 추가해 언어와 국기를 올바르게 짝지어야 합니다.
  • 규칙 4에서 6은 팀이 리그에서 올라갔는지(초록, rgba(0,255,0,0.7)), 내려갔는지(빨강, rgba(255,0,0,0.5)), 아니면 제자리인지(파랑, rgba(0,0,255,0.5)) 나타냅니다. 속성 선택자를 추가해 data-perf 속성의 inc, same, dec 문자열에 따라 적절한 규칙을 적용하세요.
  • 규칙 7에서 8은 승격 후보 팀을 굵게, 격하 후보 팀을 기울이고 흐리게 표시합니다. 속성 선택자를 추가해 data-perf 속성의 pro, rel 문자열에 따라 적절한 규칙을 적용하세요.

잘못 입력한 경우 초기화 버튼을 사용하여 언제든지 처음으로 돌아갈 수 있습니다. 정말 막혔다면 답안 보기 버튼을 사용해 가능한 답안 중 한 가지를 확인하세요.

같이 보기

속성 선택자 참고서를 방문해 더 많은 예제를 살펴보세요.

다음으로

다음 장에선 더 나아가 의사클래스와 의사요소를 알아보겠습니다.

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, ageofsys
최종 변경자: urty5656,