속성 값 선택자
Coddy의 CSS 선택자 코스 레슨 — 15개 중 13번째.
이 레슨에서는 특정 문자열로 시작하는 속성값 선택자의 개념을 깊이 있게 다룹니다. 이 기법을 사용하면 속성값의 시작 문자를 기반으로 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:
/* "btn-"로 시작하는 class 속성값을 가진 버튼을 선택합니다 */
[class^="btn-"] {
background-color: lightgray;
}제공된 코드 예제에서:
- 서로 다른 class 속성값을 가진 세 개의 버튼이 정의되어 있습니다.
- CSS 규칙
[class^="btn-"]는 "btn-"로 시작하는class속성값을 가진 요소를 타겟팅합니다. 이 버튼들에background-color: lightgray;스타일을 적용합니다.
그 결과, 세 버튼 모두 class 속성값이 "btn-"로 시작하므로 연한 회색 배경색을 갖게 됩니다.
챌린지
쉬움항목 목록에 대해 다음과 같은 HTML 구조가 있다고 가정해 봅시다. 여러분의 목표는 "fruit-"로 시작하는 특정 data-category 속성 값을 가진 리스트 항목의 스타일을 지정하는 것입니다. CSS를 사용하여 이러한 리스트 항목에 고유한 배경색을 적용하세요.
직접 해보기
<!DOCTYPE html>
<html>
<head>
<title>Attribute Value Starting With Selector</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<ul>
<li data-category="fruit-apple">Apple</li>
<li data-category="vegetable-carrot">Carrot</li>
<li data-category="fruit-banana">Banana</li>
<li data-category="fruit-orange">Orange</li>
<li data-category="grain-rice">Rice</li>
</ul>
</body>
</html>