CSS

[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

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인