VScode/CSS
[CSS] pseudoclass
hvoon
2022. 9. 8. 16:25
일반 구조 선택자
-CSS3부터 지원하는 선택자
-일반적으로 자손선택자와 병행해서 많이 사용
-같은 이름의 태그를 또는 클래스 이름들을 대상으로 하는 선택자
-종류
1) first-child: 첫번째 위치하는 자손을 선택
2) second-child: 마지막에 위치하는 자손을 선택
3) nth-chlid: n번째 위치하는 자손을 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>15_PseudoClass01.html</title>
<style type="text/css">
ul{list-style:none; padding:0px; margin:0px; height:60px;}
ul li{border:1px dashed blue; float:left; padding:15px; width:100px; text-align:center;}
ul li:nth-child(1){background:orange;}
ul li:nth-child(2){background:yellow;}
ul li:nth-child(3){background:orange;}
ul li:nth-child(4){background:yellow;}
ul li:nth-child(5){background:orange;}
ul li:nth-child(6){background:yellow;}
ul li:first-child{border-radius:20px 0 0 20px;}
/* 0은 px 생략 가능 */
ul li:last-child{border-radius:0px 20px 20px 0px;}
</style>
</head>
<body>
<ul >
<li>회사소개</li><li>사업</li><li>조직도</li>
<li>게시판</li><li>고객지원</li><li>사이트맵</li>
</ul>
</body>
</html>위의 코드와 결과는 같지만 좀 더 간결하게 표현할 경우 아래와 같다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>15_PseudoClass01.html</title>
<style type="text/css">
ul{list-style:none; padding:0px; margin:0px; height:60px;}
ul li{border:1px dashed blue; float:left; padding:15px;width:100px; text-align:center;}
ul li:nth-child(2n){background:orange;}
ul li:nth-child(2n+1){background:yellow;} /* n은 0부터 시작 */
ul li:first-child{border-radius:20px 0 0 20px;}
/* 0은 px 생략 가능 */
ul li:last-child{border-radius:0px 20px 20px 0px;}
</style>
</head>
<body>
<ul >
<li>회사소개</li><li>사업</li><li>조직도</li>
<li>게시판</li><li>고객지원</li><li>사이트맵</li>
</ul>
</body>
</html>
href
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PseudoClass02.html</title>
<style type="text/css">
li>a:first-child{color:red; background:yellow;}
/* 모든 li 태그 바로 아래 ""자식들에서 첫번째 a 태그... */
li:last-child>a{color:blue; background:yellow;}
/* 마지막 li 태그의 바로 아래 자식들 모두 */
</style>
</head>
<body>
<ul >
<li><a href="#">PsuedoClasss</a> <a href="#">PsuedoClasss</a></li>
<li><a href="#">PsuedoClasss</a> <a href="#">PsuedoClasss</a></li>
<li><a href="#">PsuedoClasss</a> <a href="#">PsuedoClasss</a></li>
<li><a href="#">PsuedoClasss</a> <a href="#">PsuedoClasss</a></li>
<li><a href="#">PsuedoClasss</a> <a href="#">PsuedoClasss</a></li>
<li><a href="#">PsuedoClasss</a> <a href="#">PsuedoClasss</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PseudoClass03.html</title>
<style type="text/css">
/* body>:first-of-type{color:red;} */
/* body 태그 안의 모든 태그들 중 같은 유형의 첫번째 태그들 */
/* h1:first-of-type{color:red;}
h1:last-of-type{color:blue;} */
h2:first-of-type{color:green;}
h3:nth-of-type(2n){color:orange;}
h1:nth-of-type(2){color:yellow;}
</style>
</head>
<body>
<h1>Header-1</h1>
<h2>Header-2</h2>
<h3>Header-3</h3>
<h3>Header-3</h3>
<h2>Header-2</h2>
<h1>Header-1</h1>
<h1>Header-1</h1>
<h3>Header-3</h3>
<h3>Header-3</h3>
</body>
</html>