속성 값 선택자 II
Coddy의 CSS 선택자 코스 레슨 — 15개 중 14번째.
이 레슨에서는 속성 값이 특정 문자열로 끝나는 선택자(attribute value ending with selectors)의 개념을 살펴보겠습니다. 이 기법을 사용하면 속성 값의 마지막 문자를 기준으로 HTML 요소를 타겟팅할 수 있습니다.
속성 값이 특정 문자열로 끝나는 선택자 구문:
특정 문자열로 끝나는 속성 값을 가진 요소를 타겟팅하려면 [attribute$="value"] 선택자 구문을 사용합니다.
코드 예시:
HTML:
<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>CSS:
/* class 속성 값이 "-tertiary"로 끝나는 버튼을 선택합니다 */
[class$="-tertiary"] {
background-color: lightcoral;
}제공된 코드 예시에서:
- 서로 다른 class 속성 값을 가진 세 개의 버튼이 정의되어 있습니다.
- CSS 규칙
[class$="-tertiary"]는class속성 값이 "-tertiary"로 끝나는 요소를 타겟팅합니다. 이 버튼들에background-color: lightcoral;스타일을 적용합니다.
그 결과, class 속성 값이 "btn-tertiary"인 버튼은 연한 산호색(light coral) 배경색을 갖게 됩니다.
챌린지
쉬움웹 페이지에 음악 트랙 목록이 제공되었습니다. 각 트랙은 형식을 나타내는 data-track 속성(예: "mp3", "wav", "flac")을 가진 <div> 요소로 표현됩니다. 여러분의 과제는 속성 값 끝 선택자를 사용하여 형식에 따라 트랙의 스타일을 다르게 지정하는 것입니다.
여러분의 CSS 과제는 다음과 같습니다:
data-track속성 값이 "mp3"로 끝나는 트랙에 고유한 배경을 지정하세요.data-track속성 값이 "wav"로 끝나는 트랙에 고유한 배경을 지정하세요.data-track속성 값이 "flac"로 끝나는 트랙에 고유한 배경을 지정하세요.
직접 해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Tracks</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<div data-track="a-mp3">Track 1 (MP3)</div>
<div data-track="a-wav">Track 2 (WAV)</div>
<div data-track="a-flac">Track 3 (FLAC)</div>
<div data-track="b-mp3">Track 4 (MP3)</div>
</body>
</html>