css 특정 요소의 부모(=조상)요소를 선택하고 싶을 때 :has()

➜부모:has(자식) ||  직계조상:has(자손) 

 

 

예로들만한 것이 생각이 안나서;;

일단 간단한 예를 들어보자..음.... 이렇게 쓰는지는 모르겠지만 그냥 예로 드는거니까😛;;

 

<그림은 그냥 아무데서나 편집해서 잘라옴ㅋㅋ>

 

 

위의 이미지와 같이 리스트를 만들 때, ' N  아이콘이 붙은 제목만 그린&볼드처리' 하고 싶다고 치자.

 

아래와 같이 새 글이 등록 되면 스크립트로 제목 내용 끝에 바로  N 를 붙이기로 했다.

(= 제목<p class="title">안에 <span class="new"> append(=뒤에 끼워넣기)하기로 했다.)

<!--HTML 원래 상태 예시------------------------------------------------------------>
<p class="title">공지사항 제목</p>

<!--새글이 등록 됐을 때 ------------------------------------------------------------>
<p class="title">공지사항 제목<span class="new"></span></p>

 

이 때, 해당 제목에만 스타일을 주기 위해 아래와 같이 선택자를 지정할 수 있다.

/*<span class="new">를 자식으로 가지는 부모<p class="title">-----------------------------*/

.title:has(.new) {
	color: green;
    font-weight: bold;
}

 

 

 

여튼 이런식으로 간단한 부모(직계조상)선택은 css로도 가능하다~~⭐️