: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: 0;
}

/* .banner안의 .product에 마우스가 올라가면, .rock 내부의 첫번째 img 에 아래 사항을 적용 */
/* 왼쪽 x 축으로 50%, y축 아래쪽으로 50px 이동 */
.banner:has(.product:hover) .rock img:nth-child(1){
    transform: translateX(-50%) translateY(50px);
}

2. :is()

• 요소:is(조건1, 조건2, …) 형식으로 사용되며, 하나 이상의 조건을 만족하는 요소를 선택할 때 유용합니다. 여러 조건 중 하나라도 일치하면 스타일이 적용됩니다.
• 코드의 가독성을 높이며 여러 조건을 OR로 연결할 수 있습니다.
• 여러 선택자를 묶어서 사용할 때 길이를 줄여주고 CSS 효율성을 높입니다.

/* h1, h2, h3 중 하나일 경우 폰트 크기 설정 */
:is(h1, h2, h3) {
    font-size: 2em;
}

/* 버튼이나 링크 중 하나일 경우 배경색 설정 */
button:is(.primary, .secondary), a:is(.primary, .secondary) {
    background-color: lightblue;
}

3. :not()

• 요소:not(조건) 형식으로 사용되며, 특정 조건을 만족하지 않는 요소를 선택합니다. 조건과 일치하지 않는 요소에만 스타일을 적용할 수 있습니다.
• 특정 조건에서 제외된 요소에 스타일을 적용할 때 유용합니다.
• 다른 선택자와 결합하여, 여러 요소에서 특정 클래스나 속성만 제외할 수 있습니다.

/* 모든 p 요소 중 .intro 클래스를 가지지 않은 요소에 스타일 적용 */
p:not(.intro) {
    color: gray;
}

/* 모든 a 요소 중 .external 클래스가 아닌 요소에만 밑줄 추가 */
a:not(.external) {
    text-decoration: underline;
}