CSS 선택자(Selector) > html

출처 : http://webstoryboy.co.kr/refer/refer_css/css-select.html

• CSS를 선택하여 {속성:값;}을 주는 방법입니다.

• 속성 선택자

자식 선택자( > )

• 부모 태그 바로 아래에 직속으로 위치한 자식 선택자만 선택됩니다.

1. <style>
2. div.child > p {color:#390;}
3. </style>
4. <div class="child">
5. <p>이 영역은 자식선택자에 속합니다.</p>
6. <p>이 영역은 자식선택자에 속합니다.</p>
7. <div>
8. <p>이 영역은 자식선택자에 속하지 않습니다.</p>
9. <p>이 영역은 자식선택자에 속하지 않습니다.</p>
10. </div>
11. </div>

이웃 선택자( + )

1. <style>
2. .child div + p {color:#390;}
3. </style>
4. <div class="child">
5. <div>이 영역은 첫번째 영역입니다.</div>
6. <p>이 영역은 두번째 영역입니다.</p>
7. <p>이 영역은 세번째 영역입니다.</p>
8. <div>이 영역은 네번째 영역입니다.</div>
9. <p>이 영역은 다섯번째 영역입니다.</p>
10. <p>이 영역은 여섯번째 영역입니다.</p>
11. </div>

• 서로 이웃한 형제 요소 중에서 바로 뒤에 있는 선택자만 선택됩니다.

형제 선택자( ~ )

• 서로 이웃한 형제 요소 <div> ~ <p> 중에서 첫번째 요소를 제외한 나머지 영역을 선택합니다.

1. <style>
2. .child div ~ p {color:#390;}
3. </style>
4. <div class="child">
5. <div>이 영역은 첫번째(1) 영역입니다.</div>
6. <p>이 영역은 두번째(2) 영역입니다.</p>
7. <p>이 영역은 세번째(3) 영역입니다.</p>
8. <p>이 영역은 네번째(4) 영역입니다.</p>
9. <p>이 영역은 다번째(5) 영역입니다.</p>
10. <div>이 영역은 여섯번째(6) 영역입니다.</div>
11. <p>이 영역은 일곱번째(7) 영역입니다.</p>
12. <p>이 영역은 여덟번째(8) 영역입니다.</p>
13. <p>이 영역은 아홉번째(9) 영역입니다.</p>
14. <p>이 영역은 열번째(10) 영역입니다.</p>
15. </div>

• 서로 이웃한 형제 요소 <div> ~ <div> 중에서 첫번째 요소를 제외한 나머지 영역을 선택합니다.

1. <style>
2. .child div ~ div {color:#390;}
3. </style>
4. <div class="child">
5. <div>이 영역은 첫번째(1) 영역입니다.</div>
6. <p>이 영역은 두번째(2) 영역입니다.</p>
7. <p>이 영역은 세번째(3) 영역입니다.</p>
8. <p>이 영역은 네번째(4) 영역입니다.</p>
9. <p>이 영역은 다번째(5) 영역입니다.</p>
10. <div>이 영역은 여섯번째(6) 영역입니다.</div>
11. <p>이 영역은 일곱번째(7) 영역입니다.</p>
12. <p>이 영역은 여덟번째(8) 영역입니다.</p>
13. <p>이 영역은 아홉번째(9) 영역입니다.</p>
14. <p>이 영역은 열번째(10) 영역입니다.</p>
15. </div>

• 서로 이웃한 형제 요소 <p> ~ <p> 중에서 첫번째 요소를 제외한 나머지 영역을 선택합니다.

1. <style>
2. .child p ~ p {color:#390;}
3. </style>
4. <div class="child">
5. <div>이 영역은 첫번째(1) 영역입니다.</div>
6. <p>이 영역은 두번째(2) 영역입니다.</p>
7. <p>이 영역은 세번째(3) 영역입니다.</p>
8. <p>이 영역은 네번째(4) 영역입니다.</p>
9. <p>이 영역은 다번째(5) 영역입니다.</p>
10. <div>이 영역은 여섯번째(6) 영역입니다.</div>
11. <p>이 영역은 일곱번째(7) 영역입니다.</p>
12. <p>이 영역은 여덟번째(8) 영역입니다.</p>
13. <p>이 영역은 아홉번째(9) 영역입니다.</p>
14. <p>이 영역은 열번째(10) 영역입니다.</p>
15. </div>