:nth-last-child(n) 예제
<style>
p:nth-last-child(4) {background: yellow;}
</style>
<div>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
<span>Since 2012</span>
<p>홈페이지 제작관리</p>
<p>서버관리 코딩언어</p>
</div>
결과보기
※ n은 1부터 시작.
:nth-last-child(n) 정의
지정요소가 그부모의 요소종류불문 마지막n번째 자식요소인 경우 선택.
1.
순서는 요소종류 불문하며, n번째 자식이 해당요소이면 적용.
2.
n은 1부터 시작.
4.
IE9 이상 주요 최신 브라우저 지원.
:nth-last-child(n) 예제 - 지정 순번이 다른 요소인 경우, 적용 안 됨.
<style>
p:nth-last-child(3) {background: yellow;}
</style>
<div>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
<span>Since 2012</span> <!--요소가 달라서 적용-->
<p>홈페이지 제작관리</p>
<p>서버관리 코딩언어</p>
</div>
결과보기
※ <p> 요소가 마지막 3번째 자식으로 온 경우가 아니라서 적용 X
:nth-last-child(n) 예제 - 요소 개수별 너비 자동 균등 배분
예제1 - 이미지
<style>
.hz{display: inline-block;}
.hz ul li {overflow: hidden; float: left; margin-right: 1%;}
.hz ul li:only-child {width: 100%; margin-right: 0%;}
.hz ul li:nth-last-child(2),
.hz ul li:nth-last-child(2)+li {width: 49%;}
.hz ul li:nth-last-child(3),
.hz ul li:nth-last-child(3)~li {width: 32%;}
.hz ul li:nth-last-child(4),
.hz ul li:nth-last-child(4)~li {width: 24%;}
.hz ul li:last-child {margin-right: 0%;}
.hz ul li img {width: 200%; height:auto; margin-left: -40%;}
</style>
<div class="hz">
<ul>
<li><img src='https://source.unsplash.com/random'></li>
<li><img src='https://source.unsplash.com/random'></li>
<li><img src='https://source.unsplash.com/random'></li>
<li><img src='https://source.unsplash.com/random'></li>
</ul>
</div>
결과보기
예제2 - 리스트
<style>
body {
margin:0;
}
ul {
padding: 0 1em;
margin: 1em 0;
list-style: none;
}
ul:after {
display: block;
content: "";
clear: both;
}
li {
float: left;
outline: 2px solid gray;
font-weight: bold;
text-align: center;
line-height: 2;
}
/* one item */
li:first-child:nth-last-child(1) {
width: 100%;
background-color: hsl(0,100%,80%);
}
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
background-color: hsl(60,100%,80%);
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
background-color: hsl(120,100%,80%);
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
background-color: hsl(180,100%,80%);
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
결과보기
땡글양 님 (190913) https://tbbrother.tistory.com/123
https://codepen.io/Tyriar/pen/qxHgE
