앞서 공부했던 선택자(id, class, 태그명, 그룹선택자 등등) 이외에도 다양한 특성을 가진 선택자들을 더 공부해볼 예정이다.
엘리먼트의 속성이나 하위요소, 자식요소 등등으로 선택 가능하다.
- "[속성명]" : 특정 속성을 명시하여 요소 선택
- 태그명+공백+태그명: 상위 요소에 포함된 하위 요소 선택
- ">": 상위 요소 바로 한 단계 하위 요소 선택
- "+": 형제 요소 중 첫번째 형제 요소 선택
- "~": 형제 요소 선택
코드 예시
img[alt] {
border: 5px dashed red;
}
body p {
color: blue;
}
p > em {
color: blue;
}
#sam + p {
color: blue;
}
#sam ~ p {
color: blue;
}
<body>
<img src"images/cat.jpeg" width="120" alt="고양이">
<img src"images/cat.jpeg" width="120">
<img id="sam" src"images/cat.jpeg" width="120">
<p>안녕<em>하세</em>요</p>
<p>하이</p>
<p>헬로우</p>
</body>위에서부터 순서대로
-img[alt]: img 태그 중 alt속성이 있는 태그만 선택
- body p: body에 있는 모든 p태그를 선택
- p > em: p태그의 바로 한단계 아래 em태그 선택
- #sam + p: sam이라는 id를 가진 태그 형제 요소 중 첫번째 태그를 선택
- #sam ~ p: sam이라는 id를 가진 태그 형제 요소 중 모든 p태그를 선택
(선택되는 형제 태그들은 모두 뒤 이어 있는 태그만 선택. 앞에 있는 태그들은 해당 안됌)
hyohyo