반응형
SMALL
동위 선택자(sibling selector)
동위 선택자는 동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 있는 특정 요소를 모두 선택한다.
(첨에 동위 선택자라 그래서 동일한 위치에 있는 요소들 인 줄 알았는데 해당 요소 뒤에 있는 애들이였음)
동위 관계란?
HTML 요소에 같은 부모(parent) 요소를 가지고 있는 요소들을 의미.
같은 동위 관계 있는 요소를 형제(sibling) 이라고 한다.
<body>
<div>
<h1>
<p>
<span>
</div>
</body>
여기서 동위 요소는 div를 부모로 가지고 있는 h1, p, span 이라고 할 수 있다.
일반 동위 선택자
해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.
div 태그와 동위 관계에 있는 요소 중 div 태그보다 뒤에 존재하는 p 태그를 모두 선택하는 예제
<style>
div ~ p {color:red;}
</style>
<body>
<div>
<p></p>
</div>
<p>내가 sibiling 이다!</p>
<p>내가 sibiling 이다!</p>
</body>인접 동위 선택자
인접 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소 바로 뒤에 존재하는 특정 타입 요소를 모두 선택한다.
<style>
div + p {background:pink;}
</style>
<body>
<div>
<p>
<div></div>
<p>내가 sibiling 이다!</p>
</p>
</div>
<p>내가 sibiling 이다!</p>
<p></p>
</body>
결국 근접선택자나 동위선택자나 같은 동위 관계 있는 요소 기준으로 뒤에 있는 요소를 선택하는 것 인데,
뒤에 있는 모든 걸 선택할거냐 바로 뒤에 있는 것만 선택할거냐의 차이이다.
반응형
LIST
'퍼블리싱 > css' 카테고리의 다른 글
| css style Cascade Layers에 대한 정리 (0) | 2024.03.11 |
|---|---|
| 필수 css 상대 단위 rem, em에 대해 알아보자 (0) | 2024.03.08 |
| css 전처리기(scss, sass) 종류와 사용법에 대해 알아보자 (0) | 2023.08.17 |
| display:gird 기초에 대해 알아보자 (0) | 2023.08.17 |
| transform, transition 그리고 벤더프리픽스란? (0) | 2023.02.27 |
