chapter 10-02

기본 속성 선택자

[속성] 선택자

a[href] {......}

어떤 요소 중, 특정 속성이 들어있는 요소를 선택하여 스타일을 적용합니다. <a href>인 요소에만 스타일을 적용합니다.

[속성 = 속성값] 선택자

a[href=www.naver.com] {......}

어떤 요소 중, 특정 속성이 들어있고 해당 속성 값이 특정 값인 경우에만 스타일을 적용합니다.

문자열 속성 선택자

이 선택자들은, 어떤 속성의 속성값이 특정 문자열 패턴을 만족하는 모든 요소를 선택합니다. 기본 속성 선택자와 달리 특정 요소 중에 찾는 것이 아니라 모든 요소를 찾는 것이기 때문에 대괄포 앞에 요소 이름을 붙이지 않습니다.

[속성 ~= 속성값] 선택자

[href~=www.naver.com]

[class~=button]

특정 속성의 속성값이 특정 속성값과 일치하는 모든 요소에 스타일을 적용합니다. a태그이건 p태그이건, class 속성이 있고 해당 속성값에 button이 포함되어 있다면 모두 적용합니다.

• "일치"의 기준 속성값이 정확히 "button"인 요소나 띄어쓰기(whitespace)를 기준으로 인식되는 단어에 "button"를 포함한 요소만을 선택합니다. 즉 flat button이 들어가있으면 선택하지만, buttons가 들어가 있다면 선택하지 않습니다.

[속성 |= 속성값] 선택자

특정 속성의 속성값이 특정 속성값과 일치하는 모든 요소에 스타일을 적용합니다.

• 위의 선택자와 다른 점은, 속성값이 정확히 "button"인 요소나 "button" 바로 다음에 하이픈(-)으로 시작하는 요소만을 선택합니다.

[속성 ^= 값] 선택자

특정 속성의 속성값이 특정 키워드로 시작하는 모든 요소에 스타일을 적용합니다.

[속성 $= 값] 선택자

특정 속성의 속성값이 특정 키워드로 끝나는 모든 요소에 스타일을 적용합니다.

[속성 *= 값] 선택자

특정 속성의 속성값에 특정 키워드가 포함되는 모든 요소에 스타일을 적용합니다.