CSS :is 선택자 중복 줄이기

기존 사용하던 방법

/ Common H1 CSS /

header h1,
section h1,
footer h1 {
font-size: 30px;
font-weight: normal;
}

header h1:before,
section h1:before,
footer h1:before {
content: '';
width: 10px;
height: 30px;
background-color: crimson;
display: inline-block;
border-radius: 5px;
margin-right: 10px;
transform: translateY(3px);
}

:is 사용하면서 선택자 한줄로 깔끔하게 표현가능
중복되는 h1은 공통으로 사용하고 :is() 안에 다른 태그이름을 넣어 준다

/ Common H1 CSS with :is /

:is(header, section, footer) h1 {
font-size: 30px;
font-weight: normal;
}

:is(header, section, footer) h1::before {
content: '';
width: 10px;
height: 30px;
background-color: crimson;
display: inline-block;
border-radius: 5px;
margin-right: 10px;
transform: translateY(3px);
}