h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }CSS selector
HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다.
element에 style 지정을 위한 3가지 기본 선택자
- tag로 지정하기
<style>
span {
color : red;
}
</style>- id로 지정하기
<style>
#spantag {
color : red;
}
</style>
<body>
<span id="spantag"> HELLO World! </span>
</body>- class로 지정하기
<style>
.spanClass {
color : red
}
</style>
<body>
<span class="spanClass"> HELLO World! </span>
</body>
CSS Selector의 다양한 활용
- id, class 요소 선택자와 함께 활용
#myid { color : red }
div.myclassname { color : red }- 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면)
h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }- 요소 선택 (공백) : 자손요소
- 아래 모든 span태그에 red색상이 적용됨
<div id="jisu">
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>
#jisu span { color : red }- 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다.
- 아래는 span tag 2만 red 색상이 적용됩니다.
<div id="jisu">
<h2>단락 선택</h2>
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다</p>
<p>세번째 단락입니다</p>
<p>네번째 단락입니다</p>
</div>
#jisu > p:nth-child(2) { color : red }- n번째 자식요소를 선택합니다. (nth-child)
- 첫번째 단락에 red 색상이 적용됩니다.
<div id="jisu"> <h2>단락 선택</h2> <p>첫번째 단락입니다</p> <p>두번째 단락입니다</p> <p>세번째 단락입니다</p> <p>네번째 단락입니다</p> </div>#jisu > p:nth-child(2) { color : red }
생각해보기
- pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.
- nth-child : 유형에 관계없이 부모의 n번째 자식 요소
- nth-of-type : 같은 유형 중 부모의 n번째 자식 요소
출처 Boostcourse - 3-3) CSS Selector
반응형
'TIL > 웹 프로그래밍(풀스택) - boostcourse' 카테고리의 다른 글
| 3-5) Element가 배치되는 방법(CSS layout)-1,2 (0) | 2020.12.27 |
|---|---|
| 3-4) CSS 기본 Style 변경하기 (0) | 2020.12.27 |
| 3-2) 상속과 우선순위 결정-2 (0) | 2020.12.27 |
| 3-2) 상속과 우선순위 결정-1 (0) | 2020.12.27 |
| 3-1) CSS 선언방법 (0) | 2020.12.27 |
댓글