본문으로 바로가기

[CSS] 문자열 속성 선택자

category Helloworld!/CSS 2015.07.09 15:55

1. 선택자[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 태그를 선택

2. 선택자[속성&=값] : 속성 안의 값이 특정 값으로 끝나는 태그를 선택

3. 선택자[속성*=값] : 속성 안의 값이 특정 값을 포함하는 태그 선택


1 선택자에 대한 예는 다음과 같다.

예를 들어 다음과 같이 박스가 1 ~ 5개가 있다.

<div class="box_1">box 1</div>
<div class="box_2">box 2</div>
<div class="box_3">box 3</div>
<div class="div_1">box 4</div>
<div class="div_2">box 5</div>


이때,  다음과 같이 했을 경우


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


div 중 class 명이 box로 시작하는 div에 백그라운드 색상을 빨강으로 하라는 것이므로,

class 가 box_1, box_2, box_3 인 box1, 2, 3만 배경이 빨간색으로 바뀐다.


다음 2 선택자에 대한 예가 다음과 같을 경우에는


div[class$=1] { background-color: red }


div 중 class 명이 1으로 끝나는 div에 백그라운드 색상을 빨강으로 하라는 것이므로,

class 가 box_1, div_1 인 box1, box4만 배경이 빨간색으로 바뀐다.




댓글을 달아 주세요