CSS의 :has() 가상 클래스 사용법

CSS에서 자식이나 후손 요소는 아주 쉽게 선택할 수 있지만, 부모나 조상 요소를 선택하는 것은 불가능한 일이 었습니다. 그래서 오랫동안 자바스크립트를 동원해서 이러한 문제를 해결하곤 했었죠.


하지만 CSS에 :has() 가상 클래스가 추가되면서 이것도 이제 옛말이 되었습니다. 웹 개발자들이 많이 기다렸던 만큼 2023년 State of JS 설문 조사 가장 많이 채택된 기능으로 뽑히고도 했었죠.


이번 포스팅에서는 비교적 최근에 CSS에 추가된 기능인 :has() 가상 클래스를 어떻게 사용하는지 알아보도록 하겠습니다.


📝 포스팅: https://www.daleseo.com/css-has/

더 많은 콘텐츠를 보고 싶다면?

또는

이미 회원이신가요?

2025년 1월 15일 오후 10:32

 • 

저장 17조회 3,261

댓글 0

    함께 읽은 게시물

    괴물은 하루아침에 태어나지 않는다

    큰 것을 하는 것보다 매일 작은 것을 완벽하게 해내는 노력이 더 중요하다. 내가 성격 장애의 하나인 자기애성 성격장애자(NPD, Narcissistic Personality Disorder)를 만나면서 느낀 것은, 처음에는 그런 사람도 "정상인"처럼 느껴진다는 것이었다. 다만 그의 미친짓은 내가 매일매일 "사소한" 사건들로 상대방에게 익숙해졌을 때 발생한다.

    ... 더 보기

    Next.js 프로젝트를 AWS EKS에 배포하며 배운 것들

    ... 더 보기

    쿠버네티스를 활용한 클라우드 네이티브 데브옵스 | 존 어런들 - 교보문고

    product.kyobobook.co.kr

    쿠버네티스를 활용한 클라우드 네이티브 데브옵스 | 존 어런들 - 교보문고

     • 

    저장 5 • 조회 948


    리트코드 102. Binary Tree Level Order Traver

    ... 더 보기

    Binary Tree Level Order Traversal | 알고달레

    알고달레

    Binary Tree Level Order Traversal | 알고달레


    iOS 19가 아니라 이제 iOS 26?

    ... 더 보기

    No iOS 19: Apple Going Straight to iOS 26

    MacRumors

    No iOS 19: Apple Going Straight to iOS 26

    스트레스를 잘 관리하면서 건강하게 살아가고 싶다면, 우선 살아있는 한 우리가 해야 할 일들은 영원히 없어지지 않을 것이므로, 해야 할 일을 100% 해내면서 할 일 목록을 완전히 없애는 데 많은 노력을 들이기보다는 70% 정도만 해내도 만족할 필요가 있다.

    ... 더 보기

    [박진영의 사회심리학]스스로 만들어 내는 스트레스

    m.dongascience.com

    [박진영의 사회심리학]스스로 만들어 내는 스트레스