Programming/HTML CSS
속성 선택자

문서내에 요소중 특정 속성과 그 값을 가진 태그만을 선택하도록 합니다.
이름 : <input type="text" id="input_name" /><br />
<input type="button" value="확인" />
▶요소 정의
input[type=text] {
 border-color:red;
}
▶정의된 요소중 type 속성이 text 인것만 해당 스타일 적용

하나의 속성이 아닌 여러 속성을 지정해야 한다면 []로 '[속성=값][속성=값]'처럼 연결하면 됩니다.

만약 값이 아닌 속성만을 대상으로 해야 한다면 값을 제외하고 다음과 같이 지정합니다.
input[type] {
 border-color:red;
}
▶type 속성을 가진 요소만을 선택

속성과 값 사이에 특정 연산자를 사용하면 값의 구분을 제어할 수 있습니다. 위 예제에서는 = 기호만을 사용해 정확히 값에 일치하는 요소만을 선택하였으나 다음 표의 기호를 사용하면 값의 대한 선택방법을 좀더 유동적으로 바꿀 수 있습니다.

 ~=  속성이 '값'을 단어로 포함하고 있는 요소를 선택
 ^=  속성이 '값'으로 시작하는 요소를 선택
 $=  속성이 '값'으로 끝나는 요소를 선택
 *=  속성이 '값'을 포함하는 요소를 선택

예를 들어 아래에 attr_type 이라는 특정 속성이 적용된 경우
이름 : <input type="text" attr_type="aaa bbb" id="input_name" /><br />
<input type="button" attr_type="aaabbb" value="확인" />
선택자를 다음과 같이 지정했을때
input[attr_type~=bbb] {
 border-color:red;
}
input이 text 인 첫번째 태그가 선택됩니다. ~= 기호는 단어로서 포함되는 내용을 지정하기 때문에 aaa bbb 처럼 aaa와 bbb가 구분되어 bbb값을 따로 볼 수 있는 형태의 태그만 선택되는 것입니다. 두번째 input의 attr_type속성 값은 aaabbb 이므로 bbb를 별도의 단어로 인식하기에는 어려워 보입니다.

반면 아래 정의는
input[attr_type*=bbb] {
 border-color:red;
}
두개의 input 요소 모두를 선택하도록 합니다. *= 기호는 해당 속성에 지정된 값을 포함하고 있는 것이면 되므로 aaa bbb든 aaabbb든 모두 해당합니다.
input[attr_type^=aaa] {
 border-color:red;
}
위 선택자는 attr_type 속성의 값이 aaa로 시작하는 요소를 의미하므로 이것 역시 aaa bbb든 aaabbb든 모두 해당합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
0 0