부모 자식 선택자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <style> ul li{ color:red; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> </body> </html> | cs |
ul 밑에 있는 li들이 선택 된다.
ul li{
color:red;
}
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 | <!DOCTYPE html> <html> <head> <style> ul li{ color:red; } ol li{ border:1px solid red; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ol> <li>HTML</li> <li>CSS <ol>selector</ol> <ol>declaration</ol> </li> <li>JavaScript</li> </ol> </body> </html> | cs |
ol 밑의 li들이 모두 바뀌게 된다. 하지만 직계 자손 태그들에게만 효과를 주고 싶다면
ol>li{
border:1px solid red;
}
하지만 이 코드에서는 il이 겹치기(22, 25) 때문에 id 값을 주어서 구분하자
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> | cs |
'Web Programming > HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [CSS] 캐스케이딩 (0) | 2018.06.19 |
|---|---|
| [CSS] 가상 클래스 선택자 (1) | 2018.06.18 |
| [CSS] 선택자 (0) | 2018.05.09 |
| [JavaScript] 달력 만들기 (0) | 2018.04.15 |
| [JavaScript] 계산기 (0) | 2018.04.15 |
