[CSS] :is pseudo selector 사용하는 방법

 

안녕하세요. 혀코입니다.

이번 시간에는 :is pseudo selector 을 사용하는 방법에 대해서 알아보겠습니다.

 

:is pseudo selector 을 사용하면 상위 요소 셀렉터들을 하나로 묶어서 사용할 수 있습니다.

 

header button:hover,
nav button:hover,
article button:hover {
	padding: 5px 10px; 
	color: white;
	background: green;
}

 

위와 같은 코드가 있을 때, :is pseudo selector 을 사용하면 상위 요소들을 하나로 묶어서 사용할 수 있기 때문에 코드 사용량을 줄일 수 있습니다.

 

:is(header, nav, article) button:hover {
	padding: 5px 10px; 
	color: white;
	background: green;
}

 

또 다른 코드를 예로 들어보면,

section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
  color: #FFFFFF;
}

 

이것을 :is pseudo selector 을 사용하면 아래코드 처럼 간결하게 표현할 수 있습니다.

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: #FFFFFF;
}

 

 

이렇게 :is pseudo selector 을 사용하는 방법에 대해서 알아봤습니다.

위 내용을 바탕으로 CSS 코드를 리팩토링해서 소스코드를 효율적으로 관리하고 용량을 줄여보면 좋겠습니다.

해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)