CSS :not() 유사 클래스를 사용하면 특정 값이 없거나 선택자와 일치하지 않는 요소를 선택하여 스타일을 구체화할 수 있습니다.
예시
다음 예는 의사 클래스가 아닌 CSS를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: cornflowerblue;
color: white;
}
p:not(div>p) {
background-color: khaki;
font-size: 1.4em;
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<div>
<p>Curabitur sapien diam, imperdiet ut est sed, blandit blandit velit. Nunc viverra nunc id ligula ultricies, a fringilla lacus interdum. <span>Sed vel diam at magna pellentesque porttitor.</span>
</p>
<h3>Demo</h3>
</div>
<p> Ut rutrum sapien sit amet sapien lacinia, at ullamcorper felis lobortis. Praesent dignissim vel turpis nec ultricies.</p>
</body>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
background-color: cadetblue;
padding: 10%;
height: 80px;
}
div:not(.parent) {
box-shadow: inset 0 0 24px tomato;
padding: 2%;
}
.parent{
border: 4px ridge orange;
}
.one {
background-color: lightgreen;
border: 4px groove gray;
}
.two{
height: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="one">
<div class="two"></div>
<div class="two"></div>
</div>
<div class="one"></div>
</div>
</body>
</html> 출력
이것은 다음 결과를 생성합니다 -
