CSS 태그:not(선택자)::가상요소 구조 사용 가능
2019. 3. 18. 00:02
실험삼아서 해봤는데 사용이 가능합니다. 제목만 보면 어떤 뜻인지 잘 모를수도 있으니 (나중에 저 조차도 까먹을 수 있으니까) 간단한 예시를 들어서 한번 더 풀어서 설명하겠습니다.
li:not(:last-child)::before { content: "#"; margin-right: 5px; }
li 태그의 :not 이므로 ~이 아니다 라는 뜻이 됩니다. 여기에 (:last-child) 이므로 마지막 요소는 "~이 아니다" 라는 의미가 됩니다. 마지막에는 ::before 가 들어갔으므로 li 의 앞에 가상요소를 적용시킨다는 뜻이 되지요. {} 안의 내용을 살펴보니, # 기호가 적용됨과 동시에 오른쪽으로 5px 떨어지도록 되어 있습니다. 이제 한 마디로 표현해 보자면 다음과 같습니다.
li의 맨 앞쪽에 #을 오른쪽으로 5px 떨어뜨려 적용을 시키는데, li의 마지막 요소에는 적용을 시키지 않는다.
그래서 결과 화면을 보시면 아래와 같이 됩니다.
See the Pen [CSS3] li:not(:last-child)::before by rgy0409 (@rgy0409) on CodePen.
보시면 마지막 li 의 텍스트에만 #이 빠진 것을 확인하실 수 있습니다. 이런식으로 가상요소를 이용할 때에도 not 을 활용해서 특정 선택자 부분에만 적용이 되지 않도록 만들 수 있다는 것을 확인했습니다. 응용해서 자신만의 멋진 스타일을 완성해 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
