[CSS팁] :last-child 선택자

[CSS팁] :last-child 선택자

오랜만에 CSS를 만져보니 전에 몰랐던 태그와 선택자들이 많았다는 걸 알게되었다. 새로운 속성들도 많이 추가가 되었고. 

가로로 나열된 배너 리스트에 간격을 주었는데 마지막 녀석에는 간격을 주면 안되는 경우가 있다. 

바로 아래와 같은 경우! 

3개의 배너에 공통으로 margin-right:30px; 을 주는데 마지막은 margin : 0; 으로 줘야함.

이런 경우가 꽤 흔하다.

예전에는 마지막 것에만 class 이름을 주고 걔만 margin:0;으로 주곤 했는데 이럴 때 마지막 것을 선택하는 선택자가 따로 있었다. 굳이 따로 클래스명을 주지 않아도 되는. 

바로 :last-child

각각의 클래스를 banner라고 줬다면 마지막 배너는 banner:last-child 라고 지정해주고 원하는 속성값을 넣으면 된다. banner라는 이름을 가진 클래스 중 마지막 어린이! ㅋㅋ 를 찾아서 적용해주니까. 

간단히 소스를 적어보면 아래와 같음.

<style>

.banner {

margin-right: 30px;

}

.banner:last-child {

margin-right: 0;

}

</style>

<div class="promotion">

<div class="banner"> 생략 </div>

<div class="banner"> 생략 </div>

<div class="banner"> 생략 </div>

</div>