3. cascading & css selector

1. cascading

 

span { 
	color : red; 
}

span { 
	color : blue;
}

 // blue

 

동일하면 나중 것 

 

 

2. CSS Selector

 

1) 그룹 선택 

 

   h1, span, div { color : red } 

 

   --> h1, span, div 를 하나의 그룹으로 묶어 빨간색 적용 

 

2) 자손요소 

 

요소 선택 (공백) : 자손요소

 

<div id="jisu">
  <div>
    <span> span tag </span>
  </div>
  <span> span tag 2 </span>
</div>

 

#jisu span { color : red }

 

모든 span 태그에 red 색상이 적용됨. 

 

3) 자식 선택 

 

자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킴. 

 

<div id="jisu">
  <h2>단락 선택</h2>
  <p>첫번째 단락입니다</p>
  <p>두번째 단락입니다</p>
  <p>세번째 단락입니다</p>
  <p>네번째 단락입니다</p>
</div>

#jisu > p:nth-child(2) { color : red }

 

첫 번째 단락에 red 색상이 적용됨.

 

 * nth-child vs. nth-of-tyle 

 

<div>

1   <li> abc </li>

2   <p> etcetcetc </p>

3    <li> def </li>

</div>

 

이렇게 코드가 작성된 경우 

 

 div > li : nth-of-type(2) ==>  div 안에서 li의 2번째것을 찾아서 거기에 맞는 css 를 적용해 주는 것

 

 div > li : nth-child(2) ==> div 안 자식들 중에 두번째를 찾는 것인데 두번째가 p 태그이므로 css 적용이 안되는 것. 이것을 만약 적용하고 싶다면 3으로 바꿔주면 적용되는 것.