CSS에서 여러 속성 선택기를 지정하는 방법

CSS에서는 여러 속성을 기반으로 요소를 선택할 수 있습니다. 이는 기준 조합을 사용하여 특정 요소를 대상으로 지정하려는 경우 유용할 수 있습니다.

구문:

여러 속성 값과 일치하는 요소를 선택하려면 다음 구문을 사용하세요. :

[attribute1=value1] [attribute2=value2]

예를 들어 속성 ​​이름이="Sex"인 입력 요소를 선택하려면 속성 값이 "M"인 경우 다음 선택기를 사용합니다.

input[name=Sex][value=M]

예:

다음 HTML 마크업을 고려하세요.

첫 번째 입력 요소는 input[name=Sex][value=M] 선택기에 의해 선택됩니다. name="Sex" 및 value="M" 속성. 두 번째 입력 요소는 value="M" 대신 value="F" 속성을 갖기 때문에 선택되지 않습니다.

참고:

따옴표 사용 속성 값은 값이 유효한 식별자가 아닌 경우에만 필요합니다.

참조:

이 구문은 다음과 같습니다. CSS 표준 문서에 잘 설명되어 있습니다:

Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times to the same attribute.

...

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }