[CSS] not, nth-child, after(before) 같이 사용하는 방법

CSS에서 :not(), :nth-child(), ::after 같은 선택자를 조합할 때의 작성 순서는 선택자 유형과 작동 범위에 따라 정해집니다. 올바른 순서를 따르면 원하는 스타일이 제대로 적용됩니다.

예제로 아래와 같이 만들어 보겠습니다.

// 기본구조 css
<style>
ul{
	width:200px;
}
li{
	background-color:#c8baff;
	padding:10px;
	margin-bottom:5px;
	min-height:40px;
	box-sizing: border-box;
}
</style>


<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

2번째 li를 제외하고 나머지 li에 가상선택자를 사용하여 '체크마크'를 넣으려면??.

li:not(:nth-child(2))::after {
	content: "✔";
	display: block;
	color:red;
}

이렇게하면 위와같은 화면을 확인할 수 있습니다.
하지만 잘못된 점이 있습니다.

---

CSS4 명세에서 :not()은 **단순 선택자(simple selector)**만 받을 수 있도록 제한되어 있습니다. 단순 선택자란 다음을 포함합니다

• 태그 선택자 (div, p 등)
• 클래스 선택자 (.class)
• ID 선택자 (#id)
• 속성 선택자 ([type="text"])
• 가상 클래스 (:hover, :first-child 등)
• 그러나 복합 선택자(e.g., div > p, li:nth-child(2)::after)는 허용되지 않습니다.

명세와 같은 내용으로 다시 작성해 보겠습니다.

li:nth-child(n):not(:nth-child(2))::after{
	content: "✔";
	display: block;
	color:red;
}

위 내용을 말로 해석하자면
li 전체에서 2번째 li를 제외하고 나머지 li에 가상요소에 체크마크를 넣는다라고 해석할 수 있겠네요.

이렇게 작성하면 위와 같은 화면을 확인 하실 수 있습니다.

---

결론

작성하는 방법에 대해 두가지를 알아보았는데 
첫번째는 css 명세와는 다르게 작성하였고, 두번째는 css 명세로 작업하였습니다.
어떻게 보면 첫번째 작성이 간단하고 명확한것 같은데 뭔가 아직 css로는 제약이 많이 있다는 생각이 드네요~
만약 CSS만으로는 해결이 어려운 조건이라면, JavaScript를 활용해야 할 것 같습니다~
유익하셧다면 구독 좋아요 ~