목차
- :has() 예제 - 지정요소 갖는 모든 요소 선택
- :has() 정의
- :has() 구문
- :has() 예제 - 1차 메뉴 허버 시 2차 서브메뉴 전체 보이기
- :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>
결과보기
