추적:

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
tech:css_selector [2014/11/20 17:31] – V_Ltech:css_selector [2018/12/31 16:20] (현재) – 59.10.111.63
줄 1: 줄 1:
 +{{tag> css html div center }}
 ======CSS 선택자(Selector)====== ======CSS 선택자(Selector)======
  
줄 5: 줄 6:
 선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다. 선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.
  
-^패턴|뜻^+^패턴^뜻^
 |#id|id로 지정된 요소 선택| |#id|id로 지정된 요소 선택|
 |.class|class로 지정된 요소 선택| |.class|class로 지정된 요소 선택|
줄 52: 줄 53:
 ====복합 선택자(Combinator)==== ====복합 선택자(Combinator)====
  
 +
 +<file css>
 +.mMenu a:first-child {background-color:blue; }
 +.mMenu a:nth-child(2){background-color:blue; }
 +.mMenu a:nth-child(3){background-color:blue; }
 +.mMenu a:nth-child(4){background-color:blue; }
 +.mMenu a:nth-child(5){background-color:blue; }
 +.mMenu a:nth-child(6){background-color:blue; }
 +.mMenu a:nth-child(7){background-color:blue; }
 +.mMenu a:nth-child(8){background-color:blue; }
 +.mMenu a:last-child {background-color:blue; }
 +
 +
 +</file>
 ===하위 선택자(Descendant Combinator)와 자식 선택자(Child Combinator)=== ===하위 선택자(Descendant Combinator)와 자식 선택자(Child Combinator)===
  
줄 60: 줄 75:
 태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다. 하위 선택자는 부모 요소에 포함된 ‘모든’ 하위 요소에 스타일을 적용합니다. 하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다 태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다. 하위 선택자는 부모 요소에 포함된 ‘모든’ 하위 요소에 스타일을 적용합니다. 하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다
  
-{{http://www.nextree.co.kr/wp-content/uploads/2014/03/yrkim-140331-selector-06.png}} 
  
 ===인접 형제 선택자(Adjacent Sibling Combinator)와 일반 형제 선택자(General Sibling Combinator)=== ===인접 형제 선택자(Adjacent Sibling Combinator)와 일반 형제 선택자(General Sibling Combinator)===
줄 99: 줄 113:
 <a href="one.xls">E[attr$="val"]형식</a> <a href="one.xls">E[attr$="val"]형식</a>
 </file> </file>
-{{tag> css html div center }} 
  
 {{tag>css selector}} {{tag>css selector}}