특정 요소의 속성값이 조건을 만족하면 선택

속성 선택자

a[attr]

.example1 input[value] { // .example1 중 value를 속성으로 가지는 요소에 스타일을 적용한다.
	color: red;
}

• 해당 속성값을 가지고 있는 요소 선택

a[attr=”value”]

.example1 input[value="6"] { // .example1 중 value가 6인 요소에 스타일을 적용한다.
	color: red;
}

• 속성값이 조건과 일치하는 요소 선택(클래스의 경우 완전히 일치해야 함)

p[attr~=”value”]

.example1 input[class~="example2"] { // .example1 중 class로 example2를 가지는 요소에 스타일을 적용한다.
	color: red;
}

• 속성 값으로 value 가지고 있는 요소 선택(클래스 등, 공백으로 구분된 여러 개의 값을 가지는 속성 중)

p[attr|=”value”]

.example1 input[class|="example2"] { // .example1 중 class로 example2 또는, example2-로 시작하는 값을 가지는 요소에 스타일을 적용한다.
	color: red;
}

• 값이 정확히 일치하거나, 바로 뒤에 하이픈(-)이 오는 속성이 있는 요소를 선택(value, value-ex1, value-ex1-ex2)

이 밖에도 매우 많음, MDN 링크