13. 속성 선택자

 

[속성] 선택자

• 대괄호([ ]) 사이에 원하는 속성 입력

// a 요소 중에서 href 속성이 있는 모든 요소 선택
 a[href] {...}

 

 

[속성 = 속성값] 선택자

• 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일 지정

// a 요소 중에서 target 속성값이 '_blank'인 것만 선택
 a[target = _blank] {...}

 

 

[속성 ~= 값] 선택자

• 여러 속성값 중에서 해당 속성값이 포함된 요소 선택
• 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는데 편리
• 값과 정확하게 이름이 일치하는 요소만 선택

// class 값 중에 button이 있는 요소
 [class ~= button] {...}

 

 

[속성 |= 값] 선택자

• 특정 속성값이 포함된 속성에 스타일 적용
• 지정한 값과 정확하게 일치하거나, 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택

//title 속성값에 us가 있어나 us-로 연결된 속성값이 있는 모든 a 요소
 a[title |= us] {...}

 

 

[속성 ^= 값] 선택자

• 속성값이 정확하게 일치하지 않더라도, 지정한 속성값으로 시작하는 요소 선택

// title 속성값이 eng로 시작하는 a요소를 찾음. eng 뿐만 아니라 english도 선택 가능
 a[title ^= eng] {...}

 

 

[속성 $= 값] 선택자

• 지정한 속성값으로 끝나는 요소 선택

//href에 링크된 파일 이름의 마지막 단어가 xls인 요소 선택
 [href $= xls] {...}

 

 

[속성 *= 값] 선택자

• 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있는 요소 선택

//href 속성 값 중에서 w3가 포함된 요소 선택
 [href *= w3] {...}