* 선택자 정리 - 자식 , 직속자식 , (모르는 것만)
1. 자식 ( .div1 i )
<!--HTML-->
<i>Outside</i>
<div class="div1">
<i>Inside 1</i>
<p>Blah blah <i>Inside 2</i></p>
<i>Inside 3</i>
</div>
<!--css-->
/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
color: orange;
}
2. 직속자식 ( .div1 > i )
<!--HTML-->
<i>Outside</i>
<div class="div1">
<i>Inside 1</i>
<p>Blah blah <i>Inside 2</i></p>
<i>Inside 3</i>
</div>
<!--css-->
/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
color: orange;
}
3. 복수선택 ( .two, .four )
<!--html-->
<p class="one">Outside 1</p>
<p class="two">Outside 2</p>
<div>
<p class="one">Inside 1</p>
<p class="two">Inside 2</p>
<p class="three">Inside 3</p>
<p class="four">Inside 4</p>
<p class="five">Inside 5</p>
</div>
<!--css-->
/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
color: orange;
}
4. n번째 자식 ( .div1 p: ) - 콜론(:)을 사용하면 몇 가지 '가상 클래스'를 선택할 수 O
<!--html-->
<div class="div1">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</div>
<!--css-->
/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
color: blue;
}
/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
color: red;
}
/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
color: green;
}
/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
font-size: 150%;
}
/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
text-decoration: line-through;
}
5. 마우스오버 ( h1:hover )
<!--html-->
<h1>Hello World!</h1>
h1 {
color: orange;
}
<!--css-->
/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
color: green;
}
원래는 주황색인데 마우스를 올리면 초록색이 된다!