CSS :has() 의사 클래스: 동적 스타일링을 위한 강력한 선택기

CSS는 개발자가 동적이고 직관적이며 시각적으로 매력적인 웹페이지를 쉽게 구축할 수 있도록 지속적으로 발전하고 있습니다. 이러한 개선 사항 중 하나는 최신 CSS에 도입된 :has() 의사 클래스입니다. 이 의사 클래스는 상위 인식 선택 기능을 제공하므로 하위 또는 형제 요소의 존재 또는 상태에 따라 조건부로 스타일을 적용할 수 있습니다.

이 기사에서는 :has() 가상 클래스의 유연성과 강력함을 보여주는 예를 들어 설명합니다.

:has() 의사 클래스란 무엇입니까?

:has() 의사 클래스는 자식, 형제 또는 자손을 기준으로 요소의 스타일을 지정할 수 있기 때문에 종종 "상위 선택자"라고도 합니다.

selector:has(selectorList)

• 선택자는 규칙이 적용되는 주요 요소입니다.
• selectorList는 하위 요소, 형제 자매 또는 기본 요소와 관련된 기타 요소를 포함할 수 있는 조건입니다.

주요 기능

• 상위 인식: 스타일은 하위 항목이나 형제 항목을 기준으로 요소에 적용됩니다.
• 유연한 조건: , ~ 및 >와 같은 결합자와 함께 작동합니다. 형제자매 관계를 위한
• 향상된 상호작용성: JavaScript에 의존하지 않고 동적 레이아웃이나 효과를 만드는 데 유용합니다.

실제 예: :has()를 사용하여 형제를 기반으로 상자 스타일 지정

body {
  font-family: sans-serif;
}

.box {
  width: 50px;
  height: 40px;
  background-color: red;
  margin: 5px;
}

.border {
  border: 2px solid black;
}

.circle {
  width: 40px;
  height: 40px;
  background-color: blue;
  border-radius: 25px;
}

/* Highlighting boxes that are followed by a circle */
.box:has(+ .circle) {
  width: 80px;
  height: 80px;
}

  
    <title>CSS :has() Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css">
  
  
    <div>



<p><strong>Explanation</strong></p>

<p><em>Basic Styles</em><br>
        The .box class defines small red rectangles with a margin.<br>
        The .circle class creates blue circular elements.</p>

<p>Dynamic Sizing Using :has():<br>
        The rule .box:has(+ .circle) applies styles to any .box element that is immediately followed by a .circle.<br>
        This rule changes the dimensions of such .box elements to 80px by 80px, making them stand out.</p>

<p><em>Visual Output</em></p>

<p>Initially, the boxes are uniform in size.<br>
The .box element immediately preceding a .circle grows larger due to the :has() rule.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173495132393104.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSS :has() Pseudo-Class: A Powerful Selector for Dynamic Styling"></p>
<h2>
  
  
  Use Cases for :has()
</h2>

<p>The :has() pseudo-class is versatile and can be applied in numerous scenarios:</p>
<h3>
  
  
  1. <strong>Interactive Layouts</strong>
</h3>

<p>Style a parent element based on the presence of a specific child or sibling element, e.g., highlighting a card if it contains a button.<br>
</p>

<pre class="brush:php;toolbar:false">.card:has(button) {
  border: 2px solid green;
}

2. 동적 탐색 메뉴

상위 항목에 스타일 적용

드롭다운 메뉴가 포함된 경우.

li:has(ul) {
  font-weight: bold;
}

3. 양식 확인

형제 또는 상위 요소를 기반으로 유효하지 않은 입력 필드를 강조표시합니다.

.form-group:has(input:invalid) {
  border-color: red;
}

4. 사용자 정의 형제 관계

인접한 형제 요소를 기준으로 요소의 스타일을 지정합니다.

h1:has(+ p) {
  margin-bottom: 10px;
}

:has()의 장점

1. 가독성 향상:

   • DOM을 감지하고 조작하기 위한 복잡한 JavaScript의 필요성을 줄입니다.

2. 성능 향상:

   • 유사한 효과를 내는 JavaScript 솔루션에 비해 가볍고 효율적입니다.

3. CSS 단순화:

   • 복잡한 관계에 대한 선언적 스타일을 활성화하여 추가 클래스나 속성을 최소화합니다.

---

브라우저 지원

현재 :has() 의사 클래스는 다음을 포함한 대부분의 최신 브라우저에서 지원됩니다.

• 크롬: 105
• 엣지: 105
• 사파리: 15.4
• Firefox: 지원을 검토 중입니다.

이전 브라우저의 경우 대체 또는 폴리필이 필요할 수 있습니다.

---

결론

:has() 의사 클래스는 현대 CSS의 판도를 바꿔 오랫동안 기다려온 상위 선택기 기능을 제공합니다. 관계에 따라 요소의 스타일을 조건부로 지정할 수 있는 기능을 통해 CSS 코드를 단순화하고, 동적 스타일을 향상시키며, DOM 조작 시 JavaScript에 대한 의존도를 줄입니다.

프로젝트에서 :has() 의사 클래스를 탐색하고 창의적이고 효율적인 웹 디자인을 위한 새로운 가능성을 열어보세요!