어떤 태그의 하위에 있는 태그를 선택하고 싶을 때는 좀 더 복합적인 선택자를 사용하게 됩니다. 여기서는 부모 태그 아래에 있는 자식 태그를 선택하는 몇가지 방법을 알아보겠습니다.
조상 자손 선택자
아래의 태그는 ul 밑에 있는 모든 태그를 선택합니다.
1 2 3 | ul li{ color:red;} |
부모 자식 선택자
아래 선택자는 #lecture 바로 밑에 있는 li만을 선택합니다.
1 2 3 | #lecture>li{ border:1px solid red;} |
친구 선택자
(이런 용어는 없습니다) 아래 코드는 ul과 ol을 동시에 선택합니다.
1 2 3 | ul,ol{ background-color: powderblue;} |
예제 - parent_selector_selector_1.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 27 28 29 30 31 32 33 | <!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> |
