CSS - 속성/값 여부를 css 선택자로 사용하는 방법

css 작성시 특정 클래스를 갖는 요소에만 스타일을 적용하고 싶다면 아래와 같이 작성하면 된다.

/* nav, active 클래스를 동시에 갖는 요소에만 css 적용 */
.nav.active {
	background-color: #0f1720;
}

 

클래스 외 특정 속성을 갖는지에 대한 여부, 특정 속성이 갖는 값을 기준으로 css를 작성하는 방법도 있다.

 

 

HTML 요소가 특정 속성을 가지고 있을 때 스타일 적용

선택자 뒤에 [속성명]을 붙여주면 해당 속성을 갖고 있는 경우에만 css가 적용되도록 작성할 수 있다.

/* data-cell-index 속성을 갖는 요소에만 css 적용 */
div[data-cell-index] {
    background-color: #1187cf;
}

 

 

HTML 요소의 특정 속성 값이 ~일 때 스타일 적용

만약 특정 속성을 갖고 있으며, 해당 속성 값이 특정 값인 경우에 css가 적용되게 하고 싶다면 선택자 뒤에 [속성명="값"]을 붙여주면 된다.

 

만약 특정 속성의 값 중 일부만 포함되는 경우에 css가 적용되게 하고 싶다면 [속성명*="값"]을 붙여주자.

 

display: none인 요소에만 css가 적용되도록 작성할 수 있다.

/* wrap 클래스를 갖는 요소 중, 인라인 스타일(style) 값에 'cursor: grabbing'을 포함하지 않는 요소에만 css 적용 */
.wrap:not([style*='cursor: grabbing']) {
  cursor: zoom-in;

  &.zoomIn {
    cursor: zoom-out;
  }
}

 

 

이 방법은 inline style인 경우에만 사용이 가능하며, 띄어쓰기 여부에 따라 스타일 적용 여부가 달라질 수 있으니 주의하자.

<!-- 1. 사이에 띄어쓰기가 없으므로 위 css 선택자가 적용되지 않음 -->
<div class="wrap" style="cursor:grabbing"> ... </div>

<!-- 2. 사이에 띄어쓰기가 있으므로 위 css 선택자가 적용됨 -->
<div class="wrap" style="cursor: grabbing"> ... </div>

 

 

그 외 속성 선택자 알아보기

=, *= 외에도 다양한 속성 선택자가 있으며, 종류는 아래와 같다.

선택자	설명
[속성=값]	정확히 해당 값을 갖는 경우만 선택
[속성*=값]	해당 값을 포함하는 경우 선택
[속성~=값]	정확히 해당 값을 갖는 경우만 선택 or 공백으로 여러 값 구분 가능 ex) [data-title~="good"]: data-title 속성 값이 good or good person인 경우 해당
[속성|=값]	해당 값으로 시작하면서 뒤에 -가 오는 경우 선택 ex) [data-i18n|="ko"]: data-i18n 속성 값이 'ko-'로 시작하는 경우 해당
[속성^=값]	해당 값으로 시작하는 경우 선택
[속성$=값]	해당 값으로 끝나는 경우 선택

 

 

참고 링크

특성 선택자 - CSS: Cascading Style Sheets | MDN