[CSS] div 클래스에 :last-child css 스타일 적용하기

페이지 정보

루루아빠 2,204 2016.03.15 15:59

평점

  • - 평점 : 0점 (0명 참여)

본문


<!--{@ loop}-->
<div class="row">
    <div class="col-md-6">
        <div class="sample">
            <div class="sample-inner">
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="sample-content">
            <div class="sample-content-inner">
            </div>
        </div>
    </div>
</div>
<!--{:}-->
루프문을 갖는 위와 같은 예제의 소스가 있을 때 스타일 정의를 아래와 같이 해주면 마지막 row 클래스에만 적용하거나 적용하지 않는 방법을 알아보자.

.row {
    margin-bottom:10px;
    border-bottom:1px dashed #ccc;
}
.row:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}
상기 스타일을 보면 일반적인 row 클래스는 margin-bottom 값과 border-bottom 값을 갖으나 루프문의 마지막 row 클래스는 margin-bottom 값과 border-bottom 값이 적용되지 않는다
 
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,289,342
레벨 96
경험치 1,385,758

Progress Bar 62%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요