[selector] CSS - :nth-last-child(n) 가상선택자 ★★★ - (그 부모의) 마지막n번째 자식요소 (= 엔스라스트차일드선택자) (순서선택자) ※ 요소 개수별 너비 자동 균등 배분 ※ 마지막 엔번째 자식요소

1. :nth-last-child(n) 예제 - 마지막 n번째 자식요소 선택
2. :nth-last-child(n) 정의
3. :nth-last-child(n) 예제 - 지정 순번이 다른 요소인 경우 적용 X
4. :nth-last-child(n) 예제 - 요소 개수별 너비 자동 균등 배분

:nth-last-child(n) 예제 - 마지막 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>

 

결과보기

:nth-last-child(n) 정의

 

지정요소가 그부모의 요소종류불문 마지막n번째 자식요소인 경우 선택.

 

---

 

1.

• 순서는 요소종류 불문하며, n번째 자식이 해당요소이면 적용.
• n번째가 지정요소가 다른 요소인 경우, 적용 X
• n은 1부터 시작. (1: 맨 끝 / 2: 맨 끝에서 2번째, ...)

 

2.

IE9 제외한 주요 최신 브라우저 지원.

 

3. MDN :nth-last-child(n) 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

 

:nth-last-child(n) 예제 - 지정 순번이 다른 요소인 경우 적용 X

 

<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