값의 하이픈을 기준으로 하는 속성 선택자
값의 하이픈을 기준으로 하는 속성 선택자는 속성 값이 하이픈으로 구분된 요소에 스타일을 적용합니다.
예시
하이픈으로 구분된 값 중에 text가 포함된
모든 요소를 찾아 빨간색으로 변경해 봅시다:
<p class="text-main-header">text1</p>
<p class="text-content">text2</p>
<p class="test-main">text3</p>
<p class="tag-test">text4</p>
p[class|="text"] {
color: red;
}
:
같이 보기
-
속성 선택자,
속성 이름으로 요소를 찾습니다 -
속성 선택자,
속성 값으로 요소를 찾습니다 -
속성 선택자,
속성 값의 시작 부분으로 요소를 찾습니다 -
속성 선택자,
속성 값의 끝 부분으로 요소를 찾습니다 -
속성 선택자,
속성 값 내의 텍스트로 요소를 찾습니다 -
속성 선택자,
속성 값 중 하나로 요소를 찾습니다 -
자식 선택자,
직계 자식 관계로 요소를 선택합니다 -
문맥 선택자,
부모 요소를 기준으로 요소를 선택합니다 -
인접 형제 선택자,
인접한 형제 요소를 기준으로 요소를 선택합니다 -
일반 형제 선택자,
특정 요소 뒤에 오는 형제 요소들을 선택합니다 -
전체 선택자,
모든 요소를 선택합니다
