css 속성 선택자

생각 보다 자주쓰는데 외워지지 않는 속성선택자를 기록하려고 합니다.

 

속성 선택자는 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다.

 

선택자	예시	의미
[attr]	[disabled] { ... }	속성 attr ( disabled )을 포함한 요소 선택
[attr=val]	[type=“text"] { ... }	속성 attr ( type )을 포함하며 속성 값이 정확하게 val( text ) 인 요소 선택 (공백으로 분리된 값이 있으면 안됨)
[attr~="val"]	[ class ~=" small "]	'val' 이 포함 ( 공백으로 분리된 값이 정확히 일치 ) ex) class=" small btn" 선택됨,  class="smallBox" 선택 안됨
[attr^="val"]	[class^=“btn"] { ... }	속성 attr ( class ) 을 포함하여 속성 값이 val ( btn ) 로 시작하는 요소 선택
[attr$="val"]	[class$=“--save"] { ... }	속성 attr ( class ) 을 포함하며 속성 값이 val ( --save )로 끝나는 요소 선택
[attr*="val"]	[ class *="small"]  { ... }	속성 attr ( class ) 을 포함하며 속성 값이 val ( small ) 인 모든 요소 선택 공백상관없이 val만 포함되면 선택됨 ex) class="btn--samll" 와 class="smallBox" 둘다 선택됨

 

 

 

개인적으로 가장 많이 쓰는 속성선택자는 val로 시작하는 요소 선택입니다.

[class^='btn'] {
	...
}