본문 바로가기

coding study

코드잇 코딩캠프 7기 ( 6/23 ~ ) - 22일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 마우스오버)

* 선택자 정리 - 자식 , 직속자식 ,   (모르는 것만)


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;
}

원래는 주황색인데 마우스를 올리면 초록색이 된다!