first-child / last-child
CSS의 버전이 CSS3로 업그레이드되면서 특정한 위치의 HTML을 선택하는 선택자가 추가되었습니다.
HTML 요소 중에서도 가장 첫 번째에 있는 요소와 마지막에 있는 요소를 선택하는 선택자가 추가되었습니다.
:first-child와 :last-child가 바로 그것입니다. :first-child는 가장 첫 번째에 있는 HTML 요소를 선택하는 선택자이고,
:last-child는 가장 마지막에 있는 HTML 요소를 선택하는 선택자입니다.
여기에서 HTML 요소의 첫 번째와 마지막의 기준은 선택된 HTML 요소의 상위 HTML 태그 블록입니다.
쉽게 말해서, HTML의 DIV, SPAN과 같이 블록으로 내용을 구성할 수 있는 HTML 태그 내부에 있는 HTML 요소 중에서 첫 번째,
마지막 태그를 CSS를 통해서 선택할 수 있는 것입니다.
다음은 :first-child와 :last-child 선택자를 사용한 CSS 예제 소스입니다.
[ 초급 ]
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
background: #ff0000; }
div:last-child{
padding:10px;
background: #ff0000; }
</style>
</head>
<body>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
<div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
</body>
</html>
[ 중급 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS 테스트</title>
<style>
#box ul {
list-style: none;
width: 200px;
padding: 0px;
margin: 0px;
border:1px solid #ccc;
box-sizing: border-box;
}
#box ul li {
width: 200px;
border-bottom: 1px solid #ccc;
padding: 10px;
font-size: 15px;
box-sizing: border-box;
}
#box ul li:last-child { border-bottom: 0px; }
#box ul li a { text-decoration: none; color: #555; }
</style>
</head>
<body>
<div id="box">
<ul>
<li>firse</li>
<li>last</li>
</ul>
</div>
</body>
</html>
※ 소스가 필요하신분은 댓글 남겨주시면 소스 보내드리겠습니다. ※
2016/12/19 - [HTML&CSS] - 폰트 URL 적용하기
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| ul li 가로정렬로 메뉴만들기 (css가로정렬) (5) | 2017.01.27 |
|---|---|
| div 프레임나누기 (2) | 2017.01.25 |
| div 배치하기 (0) | 2017.01.24 |
| html 테이블구조 만들기 (0) | 2016.12.30 |
| 폰트 URL 적용하기 (0) | 2016.12.19 |
