-
[CSS] pseudoclassVScode/CSS 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>
'VScode > CSS' 카테고리의 다른 글
[CSS] position, display, visibilty, shadow (0) 2022.09.08 [CSS] background, font, button, gradiant (0) 2022.09.08 [CSS] border, checked, box model, list (0) 2022.09.08 [CSS] selector (0) 2022.09.08 [CSS] Cascading Style Sheets (0) 2022.09.08