말하기 배우기 :not()

안녕하세요 여러분, 엔조입니다!

:not() 선택자는 정말 편리할 수 있지만 이에 대한 문서는 많지 않습니다.

다음은 몇 가지 유용한 사례입니다.

1. 테두리 트릭

가로 그리드가 있고 오른쪽 테두리로 각 셀을 구분하려고 한다고 가정해 보겠습니다.

.item-grid{
    border-right: 2px solid #000;
}

각 셀에는 테두리 오른쪽이 있지만 전체 그리드에도 테두리가 있으므로 마지막 셀에 결합된 2개의 테두리가 생깁니다!

다음은 :not()을 사용한 트릭입니다.

/* :last-child or :last-of-type work */

.item-grid:not(:last-of-type) {
    border-right: 1px solid #000;
}

호 커스 포커스 ! 이제 깨끗해졌습니다.

2.다중 :not()

우리는 다음과 같이 그것들을 연결함으로써 미쳐버릴 수 있습니다:

.item-grid:not(:nth-child(1)):not(:nth-child(3)){
    background: #000;
}

여러 선택자를 다시 작성하는 대신 선택 항목에서 일부 사각형을 제거할 수 있습니다.



그러나 :not()을 연결하면 보기 흉하고 이해하기 어려울 수 있으므로 주의해야 합니다.

3. 기사.

기사와 같이 내부에 많은 요소가 있는 컨테이너가 있다고 가정해 보겠습니다.

 <article>
     <h2>Lorem ipsum dolor sit amet.</h2>
     <hr>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur veritatis recusandae vitae voluptates sunt est, magni harum ex obcaecati.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut magni fuga eum eius, natus iure.</p>
     <a href="#">Lorem, ipsum dolor.</a>
 </article>

컨테이너 내부의 여러 요소에 속성을 적용해야 하는 경우가 종종 있지만 몇 가지 예외가 있습니다.
:not()으로 할 수 있습니다.

HR을 제외한 모든 항목에 패딩 적용:

article *:not(hr){
    padding: 10px 0;
}

링크를 제외한 모든 텍스트의 글꼴 모음:

article *:not(a){
    font-family: Arial, Helvetica, sans-serif;
}

그게 다야!

YouTube에서 웹 개발에 대해 이야기하는 나를 찾을 수 있습니다(경고, 프랑스어로 되어 있습니다!🥖🥐🍷 ).
저도 영어 채널을 시작할 계획입니다. 빌어먹을 억양을 고치려면 몇 주만 있으면 됩니다.

YT :

몸조심하시고 다음에 또 뵙겠습니다. ✒️