CSS Selector
▷ 특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야 한다.
▷ CSS Selector 문법은 HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법이다.
element에 style 지정을 위한 3가지 기본 선택자
tag
▷ 아래 예시를 실행하면, 모든 span 태그에 색상이 적용된다.
<style>
span {
color : red;
}
</style>id
▷ 아래 예시를 실행하면, 'spantag'라는 id를 가진 모든 요소에 색상이 적용된다.
▷ HTML의 요소를 선택하는 또다른 방식, 자바스크립트의 querySelector()는 이름이 같을 경우 최상단의 요소만 선택하지만 CSS는 같은 이름을 가진 모든 요소를 반영한다. | HTML요소 선택
<style>
#spantag {
color : red;
}
</style>
<body>
<span id="spantag"> HELLO World! </span>
</body>class
▷ 아래 예시를 실행하면, 'spanClass'라는 class를 가진 모든 요소에 색상이 적용된다.
<style>
.spanClass {
color : red
}
</style>
<body>
<span class="spanClass"> HELLO World! </span>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">
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>#jisu > span { 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 }더 많은 종류의 CSS 셀렉터는 아래 사이트에서 확인할 수 있다.
생각해보기
1. pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.
▷ 두 선택자의 차이점은 type 조건의 만족 여부다.
▷ nth-child는 부모 요소의 모든 자식 중 순서만 맞다면 해당 요소를 선택한다.
▷ nth-of-type는 부모 요소의 모든 자식 요소 중 ①type 조건을 만족하고, ②순서를 만족하는 대상을 선택한다.
