CSS Selector
HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법
∎ tag로 지정하기
1 2 3 4 5 | <style> span { color : red; } </style> | cs |
∎ id로 지정하기
1 2 3 4 5 6 7 8 9 | <style> #spanId { color : red; } </style> <body> <span id="spanId"> Hello World! </span> </body> | cs |
∎ class로 지정하기
1 2 3 4 5 6 7 8 9 | <style> #spanClass { color : red; } </style> <body> <span class="spanClass"> Hello World! </span> </body> | cs |
CSS Selector의 다양한 활용
∎ id, class 속성을 요소 선택자와 함께 활용
1 2 3 4 5 6 | span#mySpanId { color : red; } div.myDivClass { color : green; } | cs |
∎ 그룹 선택(여러 개 선택자에 같은 style을 적용해야 하는 경우)
1 2 3 4 5 6 | h1, span, div { color : red; } li, a#myLink { color : green; } | cs |
∎ 자손 요소 선택(선택한 요소의 모든 하위 요소에 적용해야 하는 경우)
1 2 3 | #hh_lin span { color : purple; } | cs |
hh_lin 아래 모든 span태그에 purple 색상이 적용된다.
∎ 자식 요소 선택(선택한 요소의 바로 하위 요소에 적용해야 하는 경우)
1 2 3 | #hh_lin>span { color: purple; } | cs |
1 2 3 4 5 6 | <div id="hh_lin"> <div> <span> span1 </span> </div> <span> span2 </span> </div> | cs |
span2만 purple 색상이 적용된다.
∎ n번째 자식 요소 선택
1 2 3 | #hh_lin>p:nth-child(2) { color : red; } | cs |
1 2 3 4 5 6 7 | <div id="hh_lin"> <h2>단락 선택</h2> <p>첫 번째 단락입니다</p> <p>두 번째 단락입니다</p> <p>세 번째 단락입니다</p> <p>네 번째 단락입니다</p> </div> | cs |
첫 번째 단락에 red 색상이 적용된다.
※ nth-child
hh_lin의 모든 자식의 순서에서 2번째인 요소를 찾고, 찾은 요소가 p태그인지를 확인하여 해당 style을 적용한다.
※ nth-of-type
p:nth-of-type(2)의 경우는 자식 요소 중 p태그만을 찾은 후, p태그 목록 중에서 2번째 요소를 찾아 style을 적용한다.
참고자료
'Web > CSS' 카테고리의 다른 글
| [WEB] CSS 요소 배치(2) (0) | 2018.11.18 |
|---|---|
| [WEB] CSS 요소 배치(1) (0) | 2018.11.17 |
| [WEB] CSS 기본 Style (0) | 2018.11.17 |
| [WEB] CSS 선택자 우선순위 (0) | 2018.11.17 |
| [WEB] CSS 선언방법 및 적용방법 (0) | 2018.11.17 |
