#CSS Selector #id #class #tag #nth-child
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>
id, class 요소 선택자와 함께 활용
#myid {
color: red;
}
div.myclassname {
color: blue;
}
그룹 선택(여러 개 selector에 같은 style을 적용해야 한다면)
h1, span, div {
color: red;
}
h1, span, div#id {
color: blue;
}
h1.span, div.classname {
color: orange;
}
요소 선택(공백) : 자손 요소
<div id="vicky">
<div>
<span>span tag</span>
</div>
<span>span tag 2</span>
</div>
아래 모든 span 태그에 red 색상 적용
#vicky span {
color: red;
}
자식 선택 (>): 자식은 바로 하위 엘리먼트를 가리킨다. span tag 2만 red 색상이 적용
#vicky > span {
color: red;
}
nth-child 속성을 통해 n번째 자식요소를 선택할 수 있다.
Element: nth-child(n) : 부모의 N번째 자식이면서, E요소 일 때Element: nth-type-of(n) : 같은 유형의 N번째 형제인 E요소<div id="vicky">
<h2>단락 선택</h2>
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다</p>
<p>세번째 단락입니다</p>
<p>네번째 단락입니다</p>
</div>
[첫번째 단락입니다]에 red 색상이 적용된다.
#vicky > p:nth-child(2) {
color: red;
}
[두번째 단락입니다]에 red 색상이 적용된다.
#vicky > p:nth-of-type(2) {
color: red;
}