[CSS] 첫 번째 자식 요소와 마지막 자식 요소 제외시키기

 

첫 번째 자식  요소와  마지막 자식 요소 제외시키기

 

안녕하세요~

첫 번째 자식 요소와 마지막 자식 요소를 제외시킬 때 어떻게 CSS style을 작성하시나요?

 

예를 들어,

list를 만들 때 첫 번째 요소에는 margin여백을 넣지 않고 다른 요소들에게는 margin을 넣고 싶을 때!

아래의 코드처럼 작성하고 계신가요?

```
<style>
    .list{overflow:hidden;}
    .list li{float:left;margin-left:10px}
    .list li:first-child{margin-left:0}
</style>
```
<ul class="list">
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
    <li>네번째</li>
</ul>
```

 

이렇게 작성하게 되면,

li에 margin-left:10px 스타일이 적용되고 난 후에

li:first-child에 의해 margin-left:0으로 오버 라이딩(overriding)되게 됩니다.

style 오버라이딩

 

:last-child를 사용해도 첫 번째와 마지막의 차이이지 동일하게 오버라이딩이 됩니다.

 

첫 번째 li 요소에 별도의 클래스를 추가도 오버라이딩이 됩니다.

class 추가된 오버라이딩

 

필요에 따라서는 오버라이딩(overriding)을 사용해 style을 작성할 수 있습니다.

하지만, 오버라이딩의 단점도 알고 계신가요?

 

오버라이딩 단점

1. 중복된 코드로 디버깅이 어렵다.
2. 스타일에 따라서 리페인트(repaint)나 리플로우(reflow)가 발생할 수 있다.
3. 작업자가 여럿일 때, 코드 파악이 어렵다.

 

첫 번째 자식 요소와 마지막 자식 요소를 제외시킬 때,

아래의 코드처럼 :not(:first-child) 사용하면 오버라이딩 없이 style 작성이 가능합니다 👏

```
<style>
    .list{overflow:hidden;}
    .list li{float:left;}
    .list li:not(:first-child){margin-left:0;}
</style>
```
<ul class="list">
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
    <li>네번째</li>
</ul>
```

 

 

See the Pen :not(:first-child) by yeony (@yeony1011) on CodePen.

 

:not() 셀렉터를 활용한  방법인데요~

IE하위 브라우저까지 사용이 가능해 크로스브라우징에서도 문제없이 사용할 수 있습니다

https://caniuse.com/?search=%3Anot() 

":not()" | Can I use... Support tables for HTML5, CSS3, etc

 

저는 CSS 작업할 때, 생각보다 많이 :not() 셀렉터를 사용하게 되는데요~

이 포스팅을 보신 분들도 많은 도움이 되었으면 합니다 🙂

 

 

유익하셨다면,

채널 추가 / 블로그 구독 / 공감 부탁드려요 🙏