:last-of-type

CSS 처음과 마지막에 스타일 주기

mirinae.maru

■ html 파일에서 css 파일 import
css에서 첫 요소에 스타일을 주고 싶을 때는 :first-of-type, 마지막 요소에 스타일을 주고 싶을 때는 :last-of-type을 사용한다.
 
 
 

■ 외부 CSS파일 예제

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<style>
.bgColors {
  border: 1px double #7F9DB9;
  font-size: 22px;
  width : 500px;
}
.bgColors:first-of-type {
  background-color : #ff9999
}
.bgColors:last-of-type {
  background-color : #ffcccc
}
</style>
</head>
<body>
  <h1>
    CSS Odd, Even<br/>
  </h1>
  <hr/>
  <div class="bgColors">111 first-of-type</div>
  <div class="bgColors">222</div>
  <div class="bgColors">333</div>
  <div class="bgColors">444</div>
  <div class="bgColors">555</div>
  <div class="bgColors">666</div>
  <div class="bgColors">777 last-of-type</div>
</body>
</html>

 
 
 

■ CSS 처음과 마지막에 스타일 주기 실행결과