구조 선택자

구조 선택자

 

• CSS 선택자
  
  1. 전체 선택자
     - *{margin:0;padding:0;box-sizing:border-box}
  2. 태그 선택자
     - a{text-decoration:none;}
  3. id 선택자
     - #header{}
       : 중복 사용이 불가능하다. / 주로 태그에 이름을 지정할 때 사용한다.
  4. class 선택자
     - .list{}
       : 중복 사용이 가능하다. / 주로 스타일을 지정할 때 사용한다.
  5. 복합(다중) 선택자
     - ul, ol, li{list-style:none;}
     - .list1, .list2{}
     

     <ul class="list">
     	<li>
     		<ul>
     			<li></li>
     		</ul>
     	</li>
     </ul>

  6. 자식 선택자
     : list의 한 단계 아래 있는 li
       - .list > li{}
  7. 후손 선택자
     : list 안에 있는 모든 li
       - .list li{}
     

     <p></p>
     <div></div>
     <p></p>
     <p></p>​

  8. 형제(동위) 선택자
     - div + p : div 뒤에 있는 p 하나
     - div ~ p : div 뒤에 있는 모든 p
  9. css3 선택자
     : 하위 브라우저(ie7, ie8 혹은 일부 ie10)에서 실행되지 않는다.
     - li:first-child : 첫 번째 li
     - li:last-child  : 마지막 li
     - li:nth-child(3)  : 3번째 li
     - li:nth-child(3n)  : 3의 배수
     - li:nth-child(2n)  : 짝수(even)
     - li:nth-child(2n-1)  : 홀수(odd)
     - li:nth-last-child(3)  : 뒤에서 3번째 li
     - :nth-child(n) vs :nth-of-type(n)
     

     <div class="box">
     	<p></p>
     	<div></div>
     	<div></div>
     	<p></p>
     	<p></p>
     </div>​

     - 4번째 p태그 위치
       1. .box p:nth-child(4){ }
       2. .box p:nth-of-type(2){ }

CSS 선택자	jQuery	설명
*	$("*")	모든 엘리먼트 선택
#I	$("#I")	아이디가 I인 엘리먼트 선택
E	$("E")	태그 이름이 E인 모든 엘리먼트 선택
.C	$(".C")	C라는 클래스 선택자를 가진 모든 엘리먼트 선택
E F	$("E F")	E의 자식 노드 중 태그 이름이 F인 모든 엘리먼트 선택
E.C	$("E.C")	태그 이름이 E인 엘리먼트 중 C라는 클래스 선택자를 가진 모든 엘리먼트 선택
E .C	$("E .C")	E의 자식 노드 중 C라는 클래스 선택자를 가진 모든 엘리먼트 선택
E>F	$("E>F")	E의 바로 아래 자식 중 태그 이름이 F인 모든 엘리먼트 선택

 

스타일 우선순위

 

• 동일한 스타일이 설정되어 있는 경우 맨 마지막에 선언한 스타일이 최종적으로 적용된다.
• 선택자가 다를 경우, 점수를 체크해서 더 높은 점수에 있는 스타일이 적용된다.
  - !important > 엘리먼트 스타일 > id(100점) > class(10점) > tag(1점)
    ex) div : 1점 / .box : 10점 / div .box (div안에 있는 box) : 11점
         div.box (div에 적용된 box) : 11점 → <div class="box">
         .box.box1 : 20점 → <태그 class = "box box1">
         .list li a : 12점
         #list : 100점
  - 엘리먼트 스타일
     <div style = "color:red">
  - div {color:red !important;}