CSS 문자열 속성 선택자

css  문자열 속성 선택자

 

문자열 속성 선택자

문자열 속성 선택자는 태그가 가지고 있는 속성의 특정한 문자열을 확인합니다.

 

 

1. 선택자 [ 속성 ~= 값] : 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택합니다.

div[class ~= box] {
 color: red;
}

 

 

 2. 선택자 [속성|=값] : 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택합니다.

※ '-' 으로 단어 구분 :  클래스 box-1 일때  다중클래스라면 첫번째 클래스 단어의 '-' 앞 단어로 선택 

<div class="div-1">box1</div>

div[class|=box] {
	color: red;
}

 

 

 3. 선택자 [속성^=값] : 속성 안의 값이 특정 값으로 시작하는 단어로 포함하는 문서 객체를 선택합니다.

div[class^=box] {
	color: red;
}

 

 

 4. 선택자 [속성$=값] : 속성 안의 값이 특정 값으로 끝나는 단어로 포함하는 문서 객체를 선택합니다.

div[class$=box] {
	color: red;
}

 

 

 5. 선택자 [속성*=값] : 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택합니다.

div[class*=box] {
	color: red;
}