attribute selectors

속성 선택자 (attribute selectors)

주어진 특성의 존재 여부나 그 값에 따라 요소를 선택한다.

 

[attr=value] : attr이라는 요소에 속성이 정확히 value인 것

input[type="password"] {

        background-color: thistle;

      }

type="password"라는 속성을 가진 input요소를 선택한다.

[attr~=value] : 요소 안에 value라는 값을 찾음. attr의 속성은 공백으로 구분한 여러 값이 있을 수 있다.

 

[attr|=value]  : 정확히 value이거나 value로 시작하면서 문자가 곧바로 뒤에 따라붙으면 선택

 

[attr^=value] : 접두사로 value가 포함되어 있을때

 

[attr$=value] : 접미사로 value가 포함 되어 있을 때

 

[attr*=value] : 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 선택

 

[attr operator value i] : 괄호를 닫기전에 i 혹은 I를 붙여주면 값의 대소문자를 구분하지 않는다.