선택자 2편 특성 선택자와 결합자
선택자
- 어떤 요소에 스타일을 적용할 것인지에 대한 정보
특성 선택자
-
특성 선택자는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.
-
클래스 속성을 가지고 있는 요소를 선택
-[class] { background-color: tomato; } -
클래스가 'item'인 요소를 선택
-[class='item'] { background-color: tomato; } -
기호를 추가하여 요소를 선택하는 방식을 다양화
- 클래스 값에 "it"가 포함되는 요소 선택
-[class] *= "it"* {color: white; }
- 클래스 값에 "it"로 시작하는 요소 선택
-[class] ^= "it"* { color: white; }
- 클래스 값에 "it"로 끝나는 요소 선택
-[class] $= "it"* { color: white; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>선택자 2</title>
<style>
[class$="xt"] {
color: blue;
}
[id^="uni"] {
color: green;
}
</style>
</head>
<body>
<h1>선택자 연습</h1>
<p>1번 문단 그냥 태그</p>
<p class="text">2번 문단 클래스 있음</p>
<p id="unique">3번 문단 아이디 있음</p>
<p class="text">4번 문단 클래스 있음</p>
<p>5번 문단 <span>span</span> 태그</p>
</body>
</html>결합 선택자
-
결합 선택자는 2개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택
-
자손 결합자
- 2개의 선택자 중 첫 번째 선택자 요소의 자손을 선택
- div 요소 안에 위치하는 모든 p 요소 선택
-div p{ color: white; }
- div 요소 바로 아래에 위치하는 모든 p 요소 선택
-div > p{ color: white; } -
형제 결합자
- 2개의 선택자 중 첫 번째 선택자 요소의 형제를 선택
- h1 요소의 뒤에 오는 형제 중 모든 p 요소 선택
-h1 ~ p{ color: red; }
- h1 요소의 바로 뒤에 오는 형제 p 요소 선택
-h1 + p{ color: red; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>선택자 2</title>
<style>
body p {
color: gray;
}
p > span {
color: aqua;
}
h1 ~ p {
color: coral;
}
h1 + p {
color: blue;
}
.text + p {
color: red;
}
</style>
</head>
<body>
<h1>선택자 연습</h1>
<p>1번 문단 그냥 태그</p>
<p class="text">2번 문단 클래스 있음</p>
<p id="unique">3번 문단 아이디 있음</p>
<p class="text">4번 문단 클래스 있음</p>
<p>5번 문단 <span>span</span> 태그</p>
</body>
</html>
ISTJ의 재미없는 velog