CSS3 :not(:first-child) :not(:last-child) 등등 not() 선택자 사용 방법
CSS3 에서 처음이나 마지막 리스트에는 밑줄을 빼고 싶다면? 아니면 첫번째 리스트를 제외하고 나머지에 적용하고 싶다면, 보통은 두번에 걸쳐서 나눠서 마크업을 하는 경우가 많습니다. 이번에 괜찮은 방법을 알게 되었기 때문에 반드시 까먹기전에 복습겸 이곳에 포스팅을 해두도록 하겠습니다. 이번에 만든 친효스킨에서도 이 방법을 써먹었습니다.
선택자:not(선택자) 사용 방법
영어 not 은 "~이 아니다" 라는 뜻을 가지고 있습니다. 태그에서도 그대로 이 뜻이 적용됩니다. 즉 선택자 중에서 해당 선택자를 제외한 나머지를 일괄 적용시킨다는 의미로 해석하시면 되는데 말이 좀 어려우므로 간단한 예제를 통해서 개념을 알아보겠습니다.
See the Pen CSS3 :not(:first-child), :not(:last-child) by rgy0409 (@rgy0409) on CodePen.
현재 HTML 본문의 body 안쪽에는 ul과 li 태그들이 있습니다. 총 다섯개의 리스트 메뉴로 구성되어 있습니다. CSS3의 상태를 살펴보면 비교적 간단한 마크업인데 실제 적용된 스타일을 보시면 하나만 제외하고 나머지는 모두 적용이 된 상태를 확인하실 수 있습니다. 수학적으로 표현하자면 "여집합" 개념인 샘 입니다. 예제에 나온 not이 들어간 스타일 부분을 하나하나 설명을 하도록 하겠습니다.
li:not(.li1) {color: red;} ▶ 클래스값 li1 을 제외한 나머지 li의 텍스트 색을 빨간색으로 변경함
그렇습니다. li.li1 을 하게 되면 li 요소 중, 클래스명 li1에만 해당 스타일을 적용하라는 의미가 됩니다. 하지만 여기에 not이 사용되어지면 해당 요소를 제외한 나머지가 일괄 적용 됩니다. 완전 정 반대의 의미라고 생각하시면 됩니다. 그렇기에 결과값도 리스트2를 제외한 나머지의 리스트 텍스트 색이 전부 빨간색이 적용 된 것입니다.
li:not(:last-child) {border-bottom: 1px solid #ccc;} ▶ 마지막 li를 제외한 나머지 li 태그에 1px의 두께를 가진 색상 #CCC의 밑줄을 넣음
not() 의 괄호 안에는 다양한 선택자를 넣을 수 있으며 태그선택자, 아이디 선택자, 클래스 선택자, 가상 선택자 등을 모두 사용할 수 있습니다. 그중에서 :first-child, :last-child, :nth-child 선택자도 당연히 사용 가능합니다. 만약 리스트 메뉴 중 중간의 특정 부분을 제외한 나머지를 일괄 적용을 시켜야 한다면 nth-child를 사용하면 될 것입니다. 그렇기에 예제에서의 결과는 마치 li 사이사이에만 밑줄이 들어간 것 처럼 표현이 되고 있습니다.
li:not(:first-child)::before {content: "#";} ▶ li의 처음을 제외한 나머지의 li 요소의 앞에 기호 "#"을 삽입함
가상선택자에도 사용이 가능하다고 말씀드린게 이 예시 입니다. 예제에서의 결과를 보시면 처음을 제외한 나머지 li의 텍스트 앞에 샵이 들어간것을 확인하실 수 있습니다. 보통 가상요소를 마크업 할 때는 콜론을 두개 사용하는게 기본이지만, 하나만 마크업 해도 괜찮습니다. 아무튼 가상요소인 :before 혹은 :after 를 사용해서 일괄 적용시킬수도 있다는 점을 알고 계시면 됩니다. 끝.
