+ : Next-sibiling combinator
a + b
<a> 태그 바로 다음에 오는 <b> 태그 첫번째 한개
~ : Subsequent-sibling combinator
a ~ b
<a> 태그 다음에 오는 모든 <b> 태그 형제들 여러개
* 여러 형제 요소들 중 첫번째 요소 제외하고 전체 적용시 유용!
ref.
https://ssocoit.tistory.com/274
[CSS] 모르면 평생 안쓸 미치도록 유용한 CSS 형제 결합자
HTML과 CSS를 이용해서 연속된 요소들을 순서대로 나열할 때 정해진 수치만큼 padding이나 margin을 주는 경우가 아주아주 빈번하게 발생합니다. 이 과정에서 보통 첫 요소에는 padding이나 margin이 필요
ssocoit.tistory.com
https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator
Next-sibling combinator - CSS: Cascading Style Sheets | MDN
The next-sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator
Subsequent-sibling combinator - CSS: Cascading Style Sheets | MDN
The subsequent-sibling combinator (~) separates two selectors and matches all instances of the second element that follow the first element (not necessarily immediately) and share the same parent element.
developer.mozilla.org
'A-HA💡 > CSS' 카테고리의 다른 글
| [CSS] CSS, SASS, SCSS, LESS (0) | 2024.01.30 |
|---|---|
| [CSS] 반응형 (1) | 2024.01.22 |
| [CSS] 네이밍 (0) | 2023.11.07 |
| [CSS] font-weight: bolder, lighter 은 고정값이 아니다 ㅇㅁㅇ (0) | 2023.10.23 |
| [CSS] box-sizing: border-box vs. content-box (0) | 2023.10.05 |