CSS / 선택자(Selector) / :nth-child(), :nth-last-child()

:nth-child(), :nth-last-child()

  • :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자입니다.
  • :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셉니다.
  • 인터넷 익스플로러는 IE 9 이상에서 사용할 수 있습니다.

:nth-child()

:nth-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다.

문법

:nth-child( an+b )
  • a와 b는 정수입니다. 0과 음수도 가능합니다.
  • n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 대입됩니다.
  • an+b 대신에 even, odd를 넣을 수도 있습니다.

예제

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			li:nth-last-child( 3n+2 ) {
				color: red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</body>
</html>

n에 0, 1, 2, 3, …을 대입하면 3n+2은 2, 5, 8, 11, …이 됩니다. li 요소 중 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-child( -2n+5 ) {
	color: red;
}

a를 음수로 정하면 선택하는 요소의 개수를 정할 수 있습니다. n이 0일 때 5, n이 1일 때 3, n이 2일 때 1이므로, 세 개의 홀수번째 요소가 선택됩니다.

li:nth-child( 5 ) {
  color: red;
}

a가 0이면 n에 어떤 값이 들어가도 b입니다. 0n+b라고 해도 되고, 그냥 b만 써도 됩니다. 위와 같이 하면 5번째 요소가 선택됩니다.

an+b 대신에 odd을 쓰면 홀수번째 요소가, even을 적으면 짝수번째 요소가 선택됩니다.

:nth-last-child()

:nth-last-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다. :nth-child()와 다른 점은 뒤에서 부터 센다는 것입니다.

문법

:nth-last-child( an + b )
  • a와 b는 정수입니다. 0과 음수도 가능합니다.
  • n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 대입됩니다.
  • an+b 대신에 even, odd를 넣을 수도 있습니다.

예제

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			li:nth-last-child( 3 ) {
				color: red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>10</li>
			<li>9</li>
			<li>8</li>
			<li>7</li>
			<li>6</li>
			<li>5</li>
			<li>4</li>
			<li>3</li>
			<li>2</li>
			<li>1</li>
		</ul>
	</body>
</html>

li 요소 중 뒤에서부터 3번째에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( 2n ) {
	color: red;
}

n에 0, 1, 2, 3, …을 대입하면 2n은 0, 2, 4, 6, …이 됩니다. li 요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( 3n - 1 ) {
	color: red;
}

n에 0, 1, 2, 3, …을 대입하면 3n-1은 -1, 2, 5, 8, …이 됩니다. li 요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( n + 8 ) {
	color: red;
}

n에 0, 1, 2, 3, …을 대입하면 n+8은 8, 9, 10, …이 됩니다. li 요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( even ) {
	color: red;
}

li 요소 중 뒤에서부터 짝수번째 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( odd ) {
	color: red;
}

li 요소 중 뒤에서부터 홀수번째 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

Related Posts

CSS / 애니메이션 / transition / transition-delay - transition 시작을 연기하는 속성

CSS / 애니메이션 / transition / transition-delay - transition 시작을 연기하는 속성

transition-delay transition-delay로 transition이 시작하는 시간을 연기할 수 있습니다. IE는 버전 10부터 지원합니다. 문법 transition-duration: time| initial | inherit 기본값은 0s입니다. 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 1초에 걸쳐 박스가 커집니다. 첫 번째 박스는 0.5초 대기 후 커집니다. 즉, 박스가 커지는데 1.5초가 걸립니다. 두 번째 박스는 1초 대기 후 커집니다. ...

CSS / 고정형 레이아웃 만들기

CSS / 고정형 레이아웃 만들기

레이아웃을 만드는 방법 웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다. 레이아웃을 ...

CSS / 박스 모델(Box Model)

CSS / 박스 모델(Box Model)

Box Model HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면 <body> <header> <h1>Lorem</h1> </header> </body> body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다. 박스의 구성 하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, ...

CSS / 선택자(Selector) / 전체 선택자, 타입 선택자, 속성 선택자

CSS / 선택자(Selector) / 전체 선택자, 타입 선택자, 속성 선택자

전체 선택자 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 * { color: blue; } 는 모든 요소의 색을 파란색으로 만듭니다. 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, *.abc { color: blue; } .abc { color: blue; } 는 같은 결과를 만듭니다. 타입 선택자 타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 ...

CSS / 표(table) 꾸미기 / 정렬하기

CSS / 표(table) 꾸미기 / 정렬하기

표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...

CSS / 체크박스 꾸미는 방법

CSS / 체크박스 꾸미는 방법

체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다. 체크박스 만들기 빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨을 연결시켜야 합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / 표(table) 꾸미기 / 크기 정하기

CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...

CSS / color / 텍스트 색 정하는 속성

CSS / color / 텍스트 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS 강좌