티스토리 뷰

프로그래밍/CSS 3.0

first-child, last-child

쇠주는참이슬 2012. 3. 20. 11:17
객체에 첫번째 자식 혹은 마지막 자식요소 선택한다.
백번 설명보다는 직접 해보자.




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Selectors</title>
    <style>
ul.navi li{
list-style-type:none;
display:block;
width:8em;
height:1.5em;
float:left;
text-align:center;
border-right:1px #818181 solid;
background-color:#c9c9c9;
background:-webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
background: -moz-linear-gradient(top,#c9c9c9, #a1a1a1, #848484);
}

ul.navi li:first-child{
-webkit-border-top-left-radius:.5em;
-moz-border-radius-topleft:.5em;
-border-top-left-radius:.5em;
-webkit-border-bottom-left-radius:.5em;
-moz-border-radius-bottomleft:.5em;
-border-bottom-left-radius:.5em;
}
ul.navi li:last-child {
-webkit-border-top-right-radius:.5em;
-moz-border-radius-topright:.5em;
-border-top-right-radius:.5em;
-webkit-border-bottom-right-radius:.5em;
-moz-border-radius-bottomright:.5em;
-border-bottom-right-radius:.5em;
}
    </style>
</head>
<body>
<section>
<h1>모바일 OS</h1>
<ul class="navi">
  <li>iOS</li>
  <li>안드로이드</li>
  <li>윈도우(망고)</li>
  <li>바다</li>
</ul>
</section>
</body>
</html>

           

'프로그래밍 > CSS 3.0' 카테고리의 다른 글

그림자 효과 추가하기 -box-shadow  (0) 2012.03.20
모퉁이 잡아당겨서 크기 조절하기. resize 속성  (0) 2012.03.20
가상요소 before, after  (0) 2012.03.20
가상요소 - selection  (0) 2012.03.20
border-radius 테두리를 둥글게 하는 스타일  (0) 2012.03.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함