TL;DR
- CSS 결합자(Combinators)는 선택자 사이의 관계를 나타냅니다.
- 공백(자손),
>(자식),+(인접 형제),~(일반 형제) 네 가지가 있습니다.- 자손은 모든 하위 요소, 자식은 바로 아래 한 단계, 인접 형제는 바로 다음 형제 하나, 일반 형제는 같은 부모 아래 뒤따르는 모든 형제를 선택합니다.
CSS로 스타일링을 하다 보면 다양한 선택자를 사용하게 됩니다. 그중 평소에 잘 쓰지 않아 개념이 모호했던 선택자가 있어, 이번 기회에 확실하게 정리해 보려고 합니다.
CSS 결합자는 선택자들 사이의 관계를 나타내는 표기입니다. 총 4가지가 있으며 공백, >, +, ~ 로 관계를 표현합니다.
요소들을 공백으로 이어 주는 결합자입니다. div 안에 자식으로 들어 있는 모든 p를 선택합니다.
CSS 명시도 점수 체계를 이해하고 !important 남용 없이 스타일 충돌을 해결하는 전략을 정리합니다.
2022. 9. 10.FrontendCSS 속성 선택자에서 =, *=, $=, ^= 구문을 사용해 요소를 더 유연하게 선택하는 방법을 정리합니다.
2022. 9. 10.Frontend순서 기준으로 자식 요소를 선택하는 CSS 가상 클래스 nth-of-type와 nth-child의 차이를 예시로 비교합니다.
2022. 9. 10.//CSS
div p {
font-size:2rem;
}
// HTML
<div>
<p>This is a paragraph.</p> // 이곳
<p>This is a paragraph.</p> // 이곳
<div>
<p>This is a pararagph</p> // 이곳
<p>This is a pararagph</p> // 이곳
</div>
</div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>요소들을 > 표시로 이어 줍니다. 바로 아래에 있는 자식만 선택합니다.
css//CSS div > p { font-size:2rem; } // HTML <div> <p>This is a paragraph.</p> // 이곳 <p>This is a paragraph.</p> // 이곳 <div> <p>This is a pararagph</p> <p>This is a pararagph</p> </div> </div> <p>This is a paragraph.</p> <p>This is a paragraph.</p>
요소들을 + 표시로 이어 줍니다. 자신과 인접한 형제 요소 하나만 선택합니다.
css//CSS div + p { font-size:2rem; } // HTML <div> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <div> <p>This is a pararagph</p> <p>This is a pararagph</p> </div> </div> <p>This is a paragraph.</p> // 이곳 <p>This is a paragraph.</p>
요소들을 ~ 표시로 이어 줍니다. 자신의 형제에 해당하는 모든 요소를 선택합니다.
css//CSS div ~ p { font-size:2rem; } // HTML <div> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <div> <p>This is a pararagph</p> <p>This is a pararagph</p> </div> </div> <p>This is a paragraph.</p> // 이곳 <p>This is a paragraph.</p> // 이곳
지금까지 스타일링을 할 때는 자손 선택자와 자식 선택자를 주로 사용하고, 가끔 인접 형제 선택자를 써 왔습니다. 하지만 일반 형제 선택자는 잘 사용하지 않아 개념이 모호했고, 이번 기회에 확실히 공부하려고 정리해 보았습니다. 아직 기초가 탄탄하지 않다고 느꼈으며, 탄탄한 기초를 위해 꾸준히 노력하려 합니다.