<!DOCTYPE html><html lang="ko"><head><meta charset="utf-8"><style>/*예제1) 1번예제는 아무 변화가 없다.이유는 부모요소(div)의 자식으로 p 태그가 첫번째 자식으로 위치 해야 :first-child 가 적용되는데 2번째 이기때문이다.*/div p:first-child { /* div의 첫번째 자식이 p인 요소들은 배경색을 변경한다. */background: #ff0000;}/*예제1) 2번예제도 아무변화가 없다.div를 명시하지 않고 다음과 적으면 문서전체에서 찾는다. 즉 child라는 의미를 상기하자 (걍..자식인 요소만 적용된다는거..)p태그가 xxx부모요소의 첫번째 자식이면 다음 CSS를 적용된다.*/p:first-child {background: #ff0000;}/*예제3) 1번,2번예제의 문제를 해결할 3번째..:first-of-type는 tag type의 순서로 선택된다.p태그가 xxx부모요소의 첫번째 type이면 다음 CSS가 적용된다.*/p:first-of-type {background: #ff0000;}</style></head><body><div><div>div태그1번</div><p>p태그1번</p><p>p태그2번</p></div><ul><li><h1>h1태그 1번</h1><p>p태그1번</p><p>p태그2번</p></li></ul></body></html>
반응형
'CSS' 카테고리의 다른 글
| [CSS] hr태그 1px 라인 적용 (0) | 2016.01.12 |
|---|---|
| CSS문서에 문자셋을 지정하면 에디터에서 한글이 깨지지 않는다. (0) | 2015.12.24 |
| [CSS][jQuery UI] progressbar 애니메이션 적용 (0) | 2015.10.07 |
| [CSS] background 좌표값 쉽게 얻어주는 사이트 (0) | 2015.04.10 |
| [CSS] keyframe animation - 연속으로 이미지 바뀌는 애니메이션 효과 (5) | 2015.04.06 |
