• Q&A
  • 회원가입
  • 로그인

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

: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번째가 지정요소가 다른 요소인 경우, 적용 X

3.

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 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012