반응형
4. 부모 자식 선택자
어떤 태그의 하위에 있는 태그를 선택하고 싶을 때는 좀 더 복합적인 선택자를 사용하게 됩니다. 여기서는 부모 태그 아래에 있는 자식 태그를 선택하는 몇가지 방법을 알아보겠습니다.
1) 조상 자손 선택자
아래의 태그는 ul 밑에 있는 모든 li 태그를 선택합니다.
ul li
color:red;
2) 부모 자식 선택자
아래 선택자는 #lecture 바로 밑에 있는 li만을 선택합니다.
#lecture>li
border:1px solid red;
3) 친구 선택자
(이런 용어는 없습니다) 아래 코드는 ul과 ol을 동시에 선택합니다.
ul,ol
background-color: powderblue;
예제 - parent_selector_selector_1.html
<!DOCTYPE html>
<html>
<head>
<style>
ul li
color:red;
#lecture>li
border:1px solid red;
ul,ol
background-color: powderblue;
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="lecture">
<li>HTML</li>
<li>CSS
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
<li>JavaScript</li>
</ol>
</body>
</html>
실행 화면
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 9. font (0) | 2017.10.03 |
|---|---|
| 생활코딩 css 정리 - 8. color 그리고 text-align (0) | 2017.09.30 |
| 생활코딩 css 정리 - 7. font-size (0) | 2017.09.26 |
| 생활코딩 css 정리 - 6. 속성을 공부하는 방법 (0) | 2017.09.25 |
| 생활코딩 css 정리 - 5. 가상 클래스 선택자 (0) | 2017.09.25 |
| 생활코딩 css 정리 - 3. 선택자의 종류 (0) | 2017.09.18 |
| 생활코딩 css 정리 - 2. 선택자와 선언 (0) | 2017.09.18 |
| 생활코딩 CSS 정리 - 1. inline과 style태그를 이용한 css 적용하기 (0) | 2017.09.14 |