본문 바로가기
왕초보10분 JQUERY

jquery 기본 CSS 선택자

by 세미짱 2016. 7. 22.
728x90

http://wickedmagic.tistory.com/trackback/251

01) 기본 CSS 선택자

 -. DOM API부분 중 document.querySelector( ), querySelectorAll( ) 메서드와 같은 기본 CSS 선택자와 필터 등을 이용할 수 있다.

     (jQuery만의 고유한 선택자도 지원)

선택자

설                  명

 *

 -. 모든 엘리먼트를 선택한다.

 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

 -. 아이디가 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를 선택한다.

 



02) 위치기반 선택자(필터)

 -. 선택자를 이용해 위치를 정해주게 되면 손쉽게 위치를 기반으로 하여 선택할 수 있을 뿐 아니라 모든 엘리먼트를 검색하지 않아도 된다.

    (페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관도니 관계를 기반으로 엘리먼트를 선택해야 한다.)

선택자

설                  명

 :first

 -. 페이지에서 처음으로 일치하는 엘리먼트이다.
 -. li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
 :last

 -. 페이지에서 마지막으로 일치하는엘리먼트이다.

 -. li a:list는 아이템의 마지막 링크를 반환한다.

 :fist-child

 -. 첫 번째 자식 엘리먼트이다.

 -. li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.

 :last-child

 -. 마지막 자식 엘리먼트이다.

 -. li:last-child는 각 리스트의 마지막 아이템을 반환한다.

 :only-child

 -. 형제가 없는 모든 엘리먼트를 반환한다.

 :ntn-child(n)

 -. n번째 자식 엘리먼트이다.

 -. li:nth-child(2)는 각 리스트의 두 번쨰 리스트 아이템을 반환한다.

 :ntn-child(even | odd)

 -. 짝수(even) 또는 홀수(odd) 자식 엘리먼트이다.

 -. li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.

 :ntn-child(Xn + Y)

 -. 전달된 공식에 따른 n번째 자식 엘리먼트이다.

 -. Y는 0인 경우 생략 가능하다.

 -. li:nth-child(3n)은 3의 배수 번쨰 아이템을 반환한다.

 -. li:nth-child(5n + 1)은 5의 배수 + 1번째 아이템을 반환한다.

 :even / :odd

 -. 페이지 전체의 짝수 / 홀수 번째 아이템을 반환한다.

 :eq(n)  -. n번쨰로 일치하는 엘리먼트를 반환한다.

 :gt(n)

 -. n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트를 반환한다.

 :lt(n)

 -. n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트를 반환한다.

 



03) 정의 필터 선택자

 -. CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 할 경우 사용한다.

선택자

설                  명

 :animated

 -. 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.

 :button

 -. 모든 버튼을 선택한다.

     <input [type = submit]>, <input [type = reset]>, <input [type = button]>, <button>

 :checkbox

 -. 확인란 엘리먼트만 선택한다.

     <input [type = checkbox]>

 :checked

 -. 선택된 확인란이나 라디오 버튼만을 선택한다.(CSS에서 지원)

 :contains(foo)

 -. 텍스트 foo를 포함하는 엘리먼트만 선택한다.

 :disabled  -. 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
 :enabled

 -. 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.

 :file

 -. 모든 엘리먼트를 선택한다.

     <input [type = file]>

 :header

 -. 헤더 엘리먼트만 선택한다.

     (예를 들어 <h1>부터 </h6>까지의 엘리먼트를 선택한다.

 :hidden  -. 감춰진 엘리먼트만 선택한다.
 :image

 -. 폼 이미지를 선택한다.

     <input [type = image]>

 :input

 -. 폼 엘리먼트만 선택한다.
     <input>, <select>, <textarea>, <button>

 :not(selector)

 -. selector가 아닌 것을 선택한다.

 -. 괄호 안의 조건이 아닌 것을 선택한다.

 :parent

 -. 빈 엘리먼트를 제외하고 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
 :password

 -. 비밀번호 엘리먼트만 선택한다.

     <input [type = password]>

 :radio

 -. 라디오 버튼 엘리먼트만 선택한다.

     <input [type = radio]>

 :reset

 -. 리셋 버튼을 선택한다.
     <input [type = reset]>이나 <button [type = reset]>

 :selected  -. 선택된 엘리먼트만 생각한다.
 :submit  -. 전송 버튼을 선택한다.
    <button [type = submit>이나 <input [type = submit]>
 :text  -. 텍스트 엘리먼트만 선택한다.
    <input [type = text]>
 :visible

 -. 보이는(visible) 엘리먼트만 선택한다.

'왕초보10분 JQUERY' 카테고리의 다른 글

transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery - for구문  (0) 2016.07.21
제이쿼리 다운로드 jquery CDN  (0) 2016.07.20

댓글