728x90
(7) 조합 선택자
- 조합 선택자는 기본선택자 2개 이상을 한 번에 사용하는 선택자
1) 조합 선택자의 종류
- 그룹 선택자
- 자식 선택자
- 자손(하위) 선택자
- 인접 형제 선택자
2) 그룹 선택자
- 그룹 선택자는 서로 다른 선택자가 같은 스타일을 적용할 경우 개별작성하지않고, 선택자를 콤마(,)로 연결하여 한 번에 스타일을 적용하는 방법
■ 그룹 선택자 사용시, 선택자와 선택자는 콤마(,)로 연결하여 다음과 같이 작성
→ 선택자1, 선택자2, 선택자3{}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>조합 선택자</title> <style type="text/css"> /* 그룹 선택자 */ .a1, .a2{color : #f00;} .a3, .a4, .a5, .a6, .a7{font-size : 20px;} .a1, .a2, .a3, .a4, .a5, .a6, .a7{font-family: "궁서체"} </style> </head> <body> <p class="a1">그룹예제</p> <p class="a2">그룹예제</p> <p class="a3">그룹예제</p> <p class="a4">그룹예제</p> <p class="a5">그룹예제</p> <p class="a6">그룹예제</p> <p class="a7">그룹예제</p> </body> </html> |
■ 실행화면
3) 자식 선택자
- 자식 선택자는 계층구조에서 바로 아래 오는 자식요소만을 선택한다
■ 자식 선택자 작성법
- 선택자와 선택자는 ">"로 구분
- 선택자1 > 선택자2 : 선택자1의 자식요소 선택자2만 선택
4) 자손 선택자
- 자손 선택자는 계층 구조에서 하위에 오는 모든 자손을 선택한다
■ 자손선택자 작성법
- 선택자와 선택자는 공백문자로 구분
- "선택자1 선택자2" : 선택자1의 자손 중 선택자2를 선택
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 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>조합 선택자</title> <style type="text/css"> /* 자식과 자손 */ .txt1 > p {font-size : 30px;} .txt2 p{color: #f0f;} .txt2 div p{font-size : 30px;} </style> </head> <body> <div class="txt1"> <p>자식</p> <div> <p>손자</p> </div> </div> <div class="txt2"> <p>자식</p> <div> <p>손자</p> </div> </div> </body> </html> |
■ 자식선택자와 자손선택자와 병행 또는 멀티구조
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 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>조합 선택자</title> <style type="text/css"> /* 멀티레벨 */ .txt3 p{color: #f0f;}/* 하위 모든 p 선택 */ .txt3 > p{font-size : 20px;} /*자식만 선택*/ .txt3_1 > p{text-decoration: underline;}/* 손자만 선택 */ .txt3_2 > p{font-family: "굴림";}/* 증손자만 선택 */ .txt3_1 p{border: 1px solid #000;} /*손자와 증손자 선택*/ </style> </head> <body> <div class="txt3"> <p>자식</p> <div class="txt3_1"> <p>손자</p> <div class="txt3_2"> <p>증손자</p> </div> </div> </div> </body> </html> |
■ 실행화면
5) 인접형제 선택자
- 계층구조에서 요소 바로 다음에 오는 공생요소를 선택
■ 인접형제 선택자
- 선택자1 + 선택자2{} : 선택자1 바로 다음에 오는 동생 선택자2를 선택
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>조합 선택자</title> <style type="text/css"> /* 인접형제 선택자 */ .box h4 + p{color: #f00;} </style> </head> <body> <div class="box"> <h4>title</h4> <p>내용</p> <h5>title</h5> <p>내용</p> </div> </body> </html> |
■ 실행화면
반응형