[selector] CSS - :has() 가상선택자 - 지정 요소 갖는 모든 요소 선택. (= :has선택자 = 해즈선택자)

목차

1. :has() 예제 - 지정요소 갖는 모든 요소 선택
2. :has() 정의
3. :has() 구문
4. :has() 예제 - 1차 메뉴 허버 시 2차 서브메뉴 전체 보이기
5. :has() 예제 - 지정요소 바로 앞의 형제요소 선택

:has() 예제 - 지정요소 갖는 모든 요소 선택

 

자식 요소로 img 갖는 모든 a 태그.

a:has(> img)

 

바로 뒤에 p 요소가 있는 모든 h1 태그

h1:has(+ p)

 

:has() 정의

 

내부에 지정 요소 갖는 모든 요소 선택. (아직 지원 X)

 

---

 

1.

• jQuery의 :has() 대응해 도입 예정인 CSS 가상클래스.
• :has(+ 지정선택자) - 지정선택자 바로 앞의 형제요소 선택.

 

2

IE 제외한 주요 최신 브라우저 모두 지원.

 

3. MDN :has() 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/:has

 

:has() 구문

 

:has(selector)

 

---

[매개변수]

 

selector

필수. 지정 선택자. (※ 모든 요소 가능)

 

:has() 예제 - 1차 메뉴 허버 시 2차 서브메뉴 전체 보이기

 

<style>

ul.dropdown {

    display: flex;

    padding: 0;

    background-color: #ddd;

}

ul.dropdown li {

    list-style-type: none;

    list-style-position: inside;

    flex: 1;

    padding: 0.4em;

    border:1px solid silver;

}

ul.dropdown li ul {

    display: none;

}

/*

ul.dropdown li:hover ul {

    display: inherit;

}

*/

ul.dropdown:has(li:hover) ul {

    display: inherit;

}

</style>

<ul class="dropdown">

          <li> 대메뉴1

                <article>

                    <ul>

                        <li>서브메뉴1</li>

                        <li>서브메뉴2</li>

                        <li>서브메뉴3</li>

                    </ul>

                </article>

          </li>

         <li> 대메뉴2

                <article>

                    <ul>

                        <li>서브메뉴1</li>

                        <li>서브메뉴2</li>

                        <li>서브메뉴3</li>

                    </ul>

                </article>

          </li>

          <li> 대메뉴3

                <article>

                    <ul>

                        <li>서브메뉴1</li>

                        <li>서브메뉴2</li>

                        <li>서브메뉴3</li>

                    </ul>

                </article>

          </li>

</ul>

결과보기

배르만 님 (241231) https://sir.kr/qa/549654

:has() 예제 - 지정요소 바로 앞의 형제요소 선택

(예) .hz 클래스 갖은 요소의 바로 앞 div 요소 선택.

 

<style>

:has(+ .hz) {color: red;}

.hz {color:green;}

.hz+div {color:blue;}
</style>

<div>홈짱닷컴</div>

<div class="hz">Homzzang.com</div>

<div>홈페이지 제작관리</div>

 

결과보기