728x90
반응형
<!-- src/main/webapp/7/statement.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상태 선택자</title>
<style type="text/css">
/* overflow : 영역 범위 바깥쪽의 부분은 보여주지 않음. */
ul {overflow : hidden;}
li {
list-style-type: none; /*머릿말표시 없음*/
float: left; /*li 태그들은 왼쪽부터 차례대로 나열 */
padding: 5px;
}
li:nth-child(4n) { /*nth-child(3n) : 4으로 나눈 나머지가 0인 li 태그들의 순서*/
background-color: #5AAEFF;
}
li:nth-child(4n+1) { /*nth-child(3n+1) : 4으로 나눈 나머지가 1인 li 태그들의 순서*/
background-color: #00FF00;
}
li:nth-child(4n+2) { /*nth-child(3n+1) : 4으로 나눈 나머지가 2인 li 태그들의 순서*/
background-color: #0000FF;
}
li:nth-child(4n+3) { /*nth-child(3n+1) : 4으로 나눈 나머지가 3인 li 태그들의 순서*/
background-color: #FF0000;
}
li:first-child { /* li 태그 중 첫번째 태그*/
/*원표시*/
border-radius: 20px 0 0 20px
}
li:last-child { /* li 태그 중 마지막 태그*/
border-radius: 0 20px 20px 0
}
</style>
</head>
<body>
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
<li>다섯번째</li>
<li>여섯번째</li>
<li>일곱번째</li>
<li>여덟번째</li>
<li>아홉번째</li>
</ul>
</body>
</html>728x90
반응형