CSS :not() 선택기
소개
In my previous post
나는
:not() 선택기에 대해 조금 썼고 사람들이 이 요소에 대해 들어본 적이 없다는 피드백을 많이 받았습니다. 그래서 :not() CSS 선택자에게만 포스트를 바치겠다고 생각했습니다.CSS에서 :not() 선택자는 무엇입니까?
:not()는 주어진 선택기와 일치하지 않는 요소를 대상으로 하는 CSSpseudo-class입니다. 특정 항목이 선택되는 것을 방지하기 때문에 부정 의사 클래스라고 합니다.본질적으로
:not() 선택기에 넣은 것을 제외한 모든 대상을 지정할 수 있습니다.간단한 예를 살펴보겠습니다.
:not() 규칙
:not() 선택기를 사용할 때 몇 가지 규칙이 있습니다. 프로젝트에서 :not() 선택기를 사용할 때 이 점을 염두에 두어야 합니다. 선택기를 알아내는 데 시간이 소모되는 비정상적인 결과가 발생할 수 있기 때문입니다.:not() 의사 클래스를 중첩할 수 없습니다. 즉, 할 수 없습니다:not(:not(...)).::before 및 ::after 와 같은 의사 요소와 함께 사용할 수 없습니다. :first-child 및 :last-child는 단순 선택기이므로 작동합니다. :not() 선택기를 사용하면 규칙의 특이성을 높일 수 있습니다. #foo:not(#bar)는 더 단순한 #foo와 동일한 요소와 일치하지만 더 높은 특이성을 가집니다. :not(.class)만 사용하면 .class 및 <html>를 포함하여 <body>가 아닌 모든 항목과 일치합니다. :not() 선택기는 하나의 요소에만 적용됩니다. 모든 조상을 제외하는 데 사용할 수는 없습니다. body :not(table) a는 <tr>가 :not()와 일치하므로 테이블 내부의 링크에는 여전히 적용됩니다.여러 클래스에서 :not() 선택기를 사용하는 방법
여러 클래스와 함께
:not() 선택기를 사용할 수 있습니다.일반적으로 다음과 같이 하면 됩니다.
p:not(.foo) {
}
그러나 여러 클래스를 피하고 싶습니까?
:not()에는 실제 결합자가 없으며 중첩할 수 없습니다. 그러나 and 와 유사하게 작동하는 체인을 연결할 수 있습니다.p:not(.foo):not(.bar):not(.bold):not(.italic) {
}
:first-child, :last-child 및 :nth-child()를 사용한 트릭
:not() 또는 :first-child 의사 클래스와 함께 :last-child CSS 선택기를 가장 자주 사용합니다.약간의 간격을 추가하고 싶지만 마지막 항목이 오른쪽 하단에 간격을 두는 것을 원하지 않는 목록이 있다고 생각하십니까?
:not()를 사용하면 매우 쉽게 해결할 수 있습니다!li:not(:last-child) {
margin-bottom: 20px;
}
이 CSS는 마지막 자식을 제외한 모든
<li> 요소에 적용됩니다.:first-child로 반대로 할 수도 있습니다.li:not(:first-child) {
margin-top: 20px;
}
또는
:nth-child()와 함께 사용li:not(:nth-child(2)) {
margin: 20px 0;
}
다음은 작동하는 것을 볼 수 있는 빠른 codepen 샘플입니다.
결론
:not() CSS 선택기를 사용하여 많은 편리한 작업을 수행할 수 있습니다. 메뉴, 목록 항목 및 기타 항목에 대해 많이 사용한다는 것을 알고 있습니다. 심지어 플렉스박스 그리드!이 게시물에서 무언가를 배웠기를 바라며 이 지식을 통해 CSS 기술을 향상할 수 있기를 바랍니다.
:not() 선택기를 적용하는 방법을 알려주십시오. 저는 항상 그것을 사용하여 새로운 기술을 배우고 싶습니다.
Reference
이 문제에 관하여(CSS :not() 선택기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/karsvaniersel/css-the-not-selector-4mk5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
