# CSS :has() 인터랙티브 가이드

> Clean Markdown view of GeekNews topic #13612. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=13612](https://news.hada.io/topic?id=13612)
- GeekNews Markdown: [https://news.hada.io/topic/13612.md](https://news.hada.io/topic/13612.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-03-02T10:17:02+09:00
- Updated: 2024-03-02T10:17:02+09:00
- Original source: [ishadeed.com](https://ishadeed.com/article/css-has-guide/)
- Points: 15
- Comments: 0

## Topic Body

- 우리가 계속 기다려왔던 CSS에서 하위 요소를 기반으로 요소의 스타일을 지정할 수 있는 방법인 :has()   
- CSS Selector 들 설명과 :has 를 이용한 매칭 방법  
- :has 유스케이스들 소개   
  - 파일 다운로드, 사이드바 넓이, 쿠키 배너, 대시보드 배너, 갯수 쿼리하기, 링크 뒤에 오는 타이틀 선택하기, 비활성화 버튼 있는 카드, 모달, 입력 상태, HTML 속성들

## Comments



_No public comments on this page._