속성 선택자

특정 속성이 있는 요소를 선택하는 [속성] 선택자

 

• [속성] 선택자를 이용하여 원하는 요소를 선택할 수도 있다.
• [ ] 사이에 원하는 속성을 입력하면 된다.

a[href] { ..... }

 

특정 속성 값이 있는 요소를 선택하는 [속성=속성 값] 선택자

 

• 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용한다.
• [ ] 안에 속성값을 넣고 그 사이에 '=' 기호를 표시한다.

a[target = _blank] { ..... }

 

여러 값 중에서 특정 속성 값이 포함된 속성 요소를 선택하는 [속성~=값] 선택자

 

• 해당 속성값이 포함된 요소를 선택한다.
• 속성이 하나면서 속성 값이 여러 개일 떼 특정 속성 값을 찾는 데 편리하다.

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

• 정확하게 일치하는 요소를 선택한다.

 

특정 속성값이 포함된 속성 요소를 선택하는 [속성 ¦= 값] 선택자

 

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

a[title ¦= us] { ..... }

 

특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]

 

• 속성 값이 정확하게 일치하지 않더라도 지정한 속성 값으로 시작하는 요소를 찾기 위해 사용한다.

a[title ^= eng] { ..... }

 

특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $=값] 선택자

 

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

[href $= xls] { ..... }

 

일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자

 

• 어느 위치에 있든지 지정한 속성 값이 포함되어 있다면 해당 요소를 선택한다.

[href *= w3] { ..... }