반응형
css를 이용하다보면, 공통적으로 사용하는 코드들이 발생된다.
이러한 경우 어쩔수 없이 불필요한 코드가 늘어나는 경우가 있다.
이럴 경우 코드를 줄여주는 방법중 하나가 가상클래스를 이용하는 방법이다.
오늘은 가상클래스 중 :is 에 대해서 정리해보려고 한다.
Depth가 깊은 엘리먼트에 CSS를 적용할 경우
만약 li에 color를 red로 지정해주고 싶다고하자.
하지만 그 li의 조건이 div 안에 들어있는 li일 경우,
header안에 있는 li일 경우가 조건이라고 하자.
그럼 코드는 위 처럼 작성된다.
div ul li,
div ol li,
header ul li,
header ol li {
color:red;
}해당 조건에 맞춰 코드를 작성하다보니 css가 4줄이 넘어가게 된다.
Depth 선택을 간단히 정리해주는 :is
만약 위의 코드를 :is를 정리하면 위의 코드를 좀더 간단하게 정리가 가능하다.
<html>
<head>
<style>
:is(div, header) ul li,
:is(div, header) ol li {
color: red;
}
</style>
</head>
<body>
<header>
<ol>
<li>header li</li>
</ol>
<ul>
<li>header li</li>
</ul>
</header>
<div>
<ol>
<li>div li</li>
</ol>
<ul>
<li>div li</li>
</ul>
</div>
</body>
</html>:is(div, header) ul li,
:is(div, header) ol li {
color: red;
}:is를 이용해서 위와 동일한 역할을 하는 코드를 :is를 통해 정리해줄 수 있다.
반응형
'FrontEnd > css' 카테고리의 다른 글
| css @supports 를 이용해서 브라우저에 지원 여부에 따라서 코드 적용시키기 (Can I use) (0) | 2021.08.17 |
|---|---|
| [css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기 (0) | 2021.08.16 |
| HTML/css 반응형을 위한 단위 vw, vh (svg text 반응형 처리 예시) (3) | 2021.04.23 |
| css로 만드는 체크박스 ON/OFF 스위치 버튼 디자인 예제(라이트모드/다크모드) (2) | 2021.03.04 |
| [css/svg] css와 svg, ::after&::before를 활용한 버튼 hover효과를 만들기 (0) | 2021.01.06 |