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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style> /*인접 형제 선택자 E + F 같은 부모를 가지고 있는 요소중 E 바로 다음 요소 F 에만 적용된다. (단수)*/ p + div { background: pink; } /*일반 형제 선택자 E ~ F 같은 부모를 가지고 있는 요소중 E 뒤에 오는 F 에 적용된다. (바로 뒤에 올 필요 없음) (복수)*/ div ~ h1 { background: skyblue; } </style> </head> <body> <div> <!-- p div h1 같은 형제요소 --> <h1>H2</h1> <p>P</p> <div>Div</div> <div>Div</div> <h1>H2</h1> <h1>H2</h1> </div> </body> </html> |
반응형
'CSS' 카테고리의 다른 글
| [CSS] 체크박스 focus borer 처리 (0) | 2016.06.02 |
|---|---|
| [CSS] box-sizing: border-box (0) | 2016.02.03 |
| [CSS] hover 드롭다운 메뉴 예제 (0) | 2016.01.26 |
| [CSS] hr태그 1px 라인 적용 (0) | 2016.01.12 |
| CSS문서에 문자셋을 지정하면 에디터에서 한글이 깨지지 않는다. (0) | 2015.12.24 |
