CSS 문자열 속성 선택자
2022.03.31
선택자 종류
| 예시 | 설명 |
|---|---|
| div[class~=ko-kr] { background-color: red } | ko-kr 을 포함하는 태그를 선택 |
| div[class|=ko-kr] { background-color: red } | ko , kr 을 포함하는 태그를 선택 |
| div[class^=ko-kr-name] { background-color: red } | ko-kr 로 시작하는 태그를 선택 |
| div[class$=name-ko-kr] { background-color: red } | ko-kr 로 끝나는 태그를 선택 |
| div[class*=name-ko-kr-name] { background-color: red } | ko-kr 을 포함하는 태그를 선택 |
예시
html 코드
<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>
css 코드
div { padding: .5rem 2rem; border:1px solid green;margin:.3rem;}
div[class^=box] { background-color: red }
결과
