그룹선택자
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 그룹 선택자 */
h2, h3, h4 {
color: #0000FF; /* #00F; 로 작성해도 가능! */
}
</style>
</head>
<body>
<h2>제목1</h2>
<h3>제목2</h3>
<h4>제목3</h4>
</body>
</html>=============================실행=============================
순서선택자
: nth-of-type()
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul li:nth-of-type(1) { /* item1을 의미 */
color: #FF8000;
}
ul li:nth-of-type(2) {
color: #66F; /* #6666FF; */
}
ul li:nth-of-type(3) {
color: #FF007F;
}
ul li:nth-of-type(4) {
color: #33FF33; /* #3F3; */
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</body>
</html>=============================실행=============================
짝수와 홀수 각각에 스타일 적용
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 2의 배수(짝수)에 스타일 적용 */
ul li:nth-of-type(2n) {
color:skyblue;
}
/* 2의 배수+1(홀수)에 스타일 적용 */
ul li:nth-of-type(2n+1) {
color:green;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
</body>
</html>=============================실행=============================
다른 방법
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 홀수 선택자 */
ul li:nth-of-type(odd) {
color: gray;
}
/* 짝수 선택자 */
ul li:nth-of-type(even) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
</body>
</html>=============================실행=============================
첫번째, 마지막 글자 각각 색상 적용
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul li:first-child {
color: blue;
}
ul li:last-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
</body>
</html>=============================실행=============================
