:has(), :is(), :not() 선택자 - pseudo class
1. :has()부모 요소가 특정 조건을 만족할 때 스타일을 변경할 수 있습니다.부모 선택자로 사용할 수 있어, 자식 요소 상태에 따라 부모 요소의 스타일을 조절할 수 있습니다.CSS에서 자식이나 후속 요소가 있는지 조건을 확인할 수 있습니다./* .container 내에 .active 요소가 있으면 .container에 스타일 적용 */.container:has(.active) { border: 2px solid green;}/* .card 내에 .button 요소가 있을 때 텍스트 색상 변경 */.card:has(.button) { color: blue;}/* h1의 바로 다음(같은 레벨)에 p 가 있으면, 아래 조건을 h1에 적용 */h1:has(+ p) { margin-bottom: ..
JavaScript
2024. 10. 30. 16:52
