[HTML/CSS] 첫번째, 마지막 요소 제외하고 선택하기 (:not(selector))

 

지난번에는 CSS에서

첫 번째 요소만을 선택하는 법과

마지막 요소만을 선택하는 법을 알아보았습니다.

[HTML/CSS] 형제 요소 중 첫번째 요소 선택하기 (:first-child)

[HTML/CSS] 형제 요소 중 마지막 요소 선택하기 (:last-child)

 

이번에는 반대로

첫번째 또는 마지막 요소를 제외하고

나머지 요소를 선택하는 방법을 알아보도록 하겠습니다.

 

 

:not(selector)

:not(selector) 선택자를 사용하면

selector로 선택된 요소를 제외한 나머지를 선택할 수 있습니다.

 

첫 번째 요소를 제외하고 나머지 선택하기 (:not(:first-child))

<div class='my'>첫번째</div>
<div class='my'>두번째</div>
<div class='my'>세번째</div>
<div class='my'>마지막</div>

.my {
  background-color: yellow;
}
.my:not(:first-child) {
  background-color: skyblue;
}

 

.my:not(:first-child)

클래스 이름이 'my'인 div들 중

첫 번째 요소를 제외한 나머지 요소를 선택하고,

해당 항목들의 배경색을 하늘색으로 변경하였습니다.

 

 

 

마지막 요소를 제외하고 나머지 선택하기 (:not(:last-child))

<div class='my'>첫번째</div>
<div class='my'>두번째</div>
<div class='my'>세번째</div>
<div class='my'>마지막</div>

.my {
  background-color: yellow;
}
.my:not(:last-child) {
  background-color: skyblue;
}

 

.my:not(:last-child)

클래스 이름이 'my'인 div들 중,

마지막 요소를 제외한 나머지 요소들을 선택하여

배경색을 하늘색으로 변경하였습니다.