CSS 콤비네이터 2022에 대한 완전한 가이드. 이 블로그에서 CSS 콤비네이터에 대해 알아야 할 모든 것을 찾을 수 있습니다.

👋 안녕하세요 쿠나알입니다. 이 기사에서 우리는 CSS Combinators라고 불리는 것에 대해 이야기할 것입니다. 아니면 div ~ span 또는 div > p와 같은 것을 본 적이 있을 것입니다. 바로 오늘 우리가 논의할 것입니다. 더 이상 시간을 낭비하지 않고 시작합시다.

📌 결합자란 무엇인가요?

이것은 간단한 CSS 선택기의 조합입니다. 무슨 뜻인가요? 클래스 선택기, ID 선택기 또는 태그 선택기를 의미합니다. CSS의 모든 것은 단순 선택기이며 둘 이상의 선택기를 사용하면 결합기 선택기를 만듭니다. 예를 들어.
div 및 p는 단순 선택자이지만 함께 div p 이제 결합 선택자입니다.

기본적으로 결합자 선택자는 선택자 간의 관계를 정의합니다.

1. 자손 선택자

기본적으로 지정된 요소 내부 또는 하위 요소의 모든 요소를 ​​선택합니다. 예를 들어

div p {
   color : red;
}

모든 중첩 <p> 요소를 포함하여 <div> 요소 내부의 모든 <p> 요소에 색상을 지정하고 스타일을 지정합니다. 중첩 요소는 다음과 같은 컨테이너에 중첩된 요소입니다.

<div>
    <p>Paragraph</p>
    <h1><p>Nested Paragraph</p><h1>
</div>

2. 하위 선택기( > )

중첩된 요소를 제외하고 지정된 요소 내부의 모든 요소를 ​​선택합니다. 예를 들어,

div > p {
   color: red;
}

따라서 위의 예는 <p> 요소의 모든 <div> 요소를 선택하지만 중첩된 <p> 요소에는 영향을 미치지 않습니다.

3. 인접 형제 선택자(+)

인접 형제 선택기는 지정된 요소의 요소 바로 뒤에 있는 요소를 선택합니다. 예를 들어,

div + p {
   color: red;
}

따라서 위의 코드는 <p> 요소 바로 뒤에 있는 <div> 요소만 선택합니다. 예시 -

4. 일반 형제자매 선택자(~)

이것은 마지막 요소이며 지정된 요소 이후의 모든 요소를 ​​선택합니다. 예를 들어,

div ~ p {
  color: red;
}

위의 예는 <p> 요소 뒤의 모든 <div> 요소를 선택합니다. 예시 -

📌 마무리

그게 다야 이것은 CSS Combinators에 관한 것이었습니다. 이 기사가 마음에 드셨기를 바라며 이 기사가 도움이 되었기를 바랍니다. 마음에 들었거나 더 흥미로운 웹 개발 팁과 트릭을 놓치고 싶지 않다면 내에서 나를 팔로우하거나 웹 개발을 마스터하고 싶다면 내 채널을 구독하기만 하면 됩니다.

읽어 주셔서 감사합니다