[css] 자손 선택자, 자식 선택자 차이

 

 

[css] 자손 선택자, 자식 선택자 차이

 

css 선택자 중에 자손 선택자와 자식 선택자를 알아 보겠습니다.

 

 

 

 

css 선택자, 선택자 종류와 사용법

 

 

자손 선택자

 

자손 선택자(descendant selector)는 문서 구조에서 특정 요소의 자손을 선택하는 선택자입니다.

 

자손은 자식, 손자, 그리고 그 이후에 후손을 모두 포함 합니다.

 

 

★ 문법

 

A B{속성: 속성값;}

 

 

A와 B 사이를 공백(space)로 분리하여 표시합니다.

 

사용 예: div p{color:blue;}

 

div 이내에 있는 p 요소는 모두 파란색 글씨로 지정 됩니다.

 

실제 html/css 작성 예를 보겠습니다descendent.htm

 

 

html

<OL>                   
  <LI>item</LI>        
  <LI>item             
    <OL>               
      <LI>item</LI>    
      <LI>item</LI>    
      <LI>item         
        <OL>           
          <LI>item</LI>
        </OL>          
        <OL>           
          <LI>item</LI>
        </OL>          
      </LI>            
      <LI>item</LI>    
    </OL>              
  </LI>                
  <LI>item</LI>        
  <LI>item</LI>        
</OL>                  
<OL>                   
  <LI>item</LI>        
  <LI>item</LI>        
</OL>            

 

css

OL LI{color:red;}

 

▶실행화면 

 

 

자손 선택자와 전체 선택자

 

자손 선택자 사이에 전체 선택자가 올 경우, 바로 이후에 오는 자식 요소는 선택되지 않고,

 

자식 이후에 오는 자손들만 선택됩니다.

 

 

 

css

OL * LI{color:red;}

 

 ▶실행화면 

 

 

 

자식 선택자

 

자식 선택자(child selector)는 특정 요소의 직계 자식만 선택하는 선택자입니다. (자식 이후 손자, 후손들 포함하지 않음)

 

 

★ 문법

 

A > B{속성: 속성값;}

 

 

사용 예: div > p {color:blue;}

 

div 이내에 있는 직계 자식 p만 파란색 글씨로 표시 됨.

 

실제 사용 예를 보겠습니다~child selector.htm

 

html

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <ol>
   <li>item 1</li>   
   <li>item 2</li>  
 </ol>
 <li>Item 3</li>
</ul>

 

 

css

ul > li{color:red;}

 

 ▶실행화면 

 

 

 

 

인접 형제 선택자, 일반 형제 선택자 차이

 

[css3] :not 선택자

 

링크 가상 클래스(:link, :visited,:hover, :active)

 

[css2/3] 속성 선택자