셀렉터 사용하기 #1 - CSS셀렉터

. 자식 셀렉터 : 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분한다.

  p > a

 

 

. 어트리뷰트 셀렉터 : 엘리먼트의 어트리뷰트의 값을 구분하여 찾는다.

  a[href^=http://]

  a 엘리먼트중 [] 안에 어트리뷰트 명과 값과 어떤 조건으로 찾을 것인지를 기술한다.

  ^는 값의 시작 부분이 일치함을 의미한다.

  웬지 정규식 스럽다.

 

. 값에 상관없이 특정 어트리뷰트를 가지는 경우는

  a[href]

 

. 어트리뷰트의 특정 값과 일치시키려면

  input[type=text]

 

. 끝 값이 일치하는

  a[href$=.pdf]

 

. 임의의 문자열을 포함하는

  a[href*=jquery.com]

 

 

. 컨테이너 셀렉터 : 엘리먼트를 포함하고 있는 엘리먼트를 찾는다.

  li:has(a)

  <a>엘리먼트를 포함하는 모든 <li>엘리먼트

  li a 처럼 <li>엘리먼트에 포함된 모든 <a>엘리먼트와는 Return되는 엘리먼트 집합이 다르다.

  쟈는 li, 야는 a

 

. 중첩은 한 단계만 허용된다.

  foo:not( bar:has(baz) ) : O

  foo:not (bar:has( baz:eq(2) ) ) : X

 

 

* jQuery가 지원하는 기본 CSS 셀렉터

셀렉터	설명
*	모든 엘리먼트와 일치
E	태그명이 E인 모든 엘리먼트와 일치
E F	E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E > F	E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
E + F	E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E ~ F	E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F)	태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치
E.C	클래스명 C를 가지는 모든 엘리먼트 E와 일치.  E의 생략은 *.C와 동일
E#I	ID가 I인 엘리먼트 E와 일치.  E의 생략은 *#I와 동일
E[A]	어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V]	값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V]	값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V]	값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V]	값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치