1. 기본 셀렉터 (CSS 셀렉터 사용)
  • element : 모든 <element> 엘리먼트와 일치하는 실렉터.
  • #id : 지정된 아이디를 가지는 엘리먼트와 일치하는 실렉터.
  • .class : 지정된 클래스명을 가지는 모든 엘리먼트와 일치.
  • * : 모든 엘리먼트 지정.
  • selector1, selector2, selectorN : 각각의 지정된 실렉터와 일치하는 엘리먼트 반환.

  예> a#myID.myClass  

       - 아이디가 myID이고 myClass를 클래스로 가지는 <a> 링크 태그와 일치하는 실렉터

      p a.myClass

       - <p> 엘리먼트 안에 myClass를 클래스로 가지는 모든 <a> 엘리먼트와 일치하는 실렉터



2. 계층 실렉터 

  • ancestor descendant : 조상 <ancestor> 엘리먼트의 자손(descendant)인 모든<descentant> 엘리먼트와 일치
  • parent > child : <parent>의 바로아래 자식인 모든 <child> 엘리먼트와 일치
  • prev + next : <prev> 엘리먼트 바로 다음의 형재인 <next> 엘리먼트와 일치
  • prev + sibling : <prev> 엘리먼트 다음의 형제인 모든 <sibling> 엘리먼트와 일치

3. 기본 필터 실렉터 

  • :first : 페이지 처음 선택된 엘리먼트와 일치
  • :last : 페이지 마지막 선택된 엘리먼트와 일치
  • :not(selector) : 주어진 실렉터와 반대의 모든 엘리먼트와 일치
  • :even : 페이지의 짝수 번째 엘리먼트와 일치(인덱스는 0부터 시작)
  • :odd : 페이지의 홀수 번째 엘리먼트와 일치(인덱스는 0부터 시작)
  • :eq(index) : 지정된 index 번째의 엘리먼트와 일치
  • :gt(index) : 지정된 index 번째의 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치
  • :lt(index) : 지정된 index 번째의 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치
  • :header : 헤더 <h1> ~ <h6> 엘리먼트와 일치
  • :animated : 현재 애니메이션이 적용되고 있는 엘리먼트와 일치

4. 내용 필터 셀렉터

  • :content(text) : 지정된 text 내용을 포함하는 엘리먼트와 일치
  • :empty : 자식을 가지지 않은 엘리먼트와 일치
  • :has(selector) : 지정된 selector와 일치되는 엘리먼트를 포함하는 엘리먼트와 일치
  • :parent : 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트와 일치

5. 가시 필터 셀렉터

  • :hidden : 감춰진(hidden) 엘리먼트와 일치
  • :visible : 보이는(visible) 엘리먼트와 일치


6. 속성 필터 셀렉터

  • [attribute] : 지정된 속성(attribute)를 가지는 엘리먼트와 일치
  • [attribute=value] : 지정된 속성(attribute)과 값(valu)을 가지는 엘리먼트와 일치
  • [attribute!=value] : 지정된 속성과 같지않거나 지정된 속성 값을 가지지않는 엘리먼트와 일치
  • [attribute^=value] : 지정한 값으로 시작하는  속성을 가진 엘리먼트와 일치
  • [attribute$=value] : 지정한 값으로 끝나는  속성을 가진 엘리먼트와 일치
  • [attribute*=value] : 지정한 값을 포함하는  속성을 가진 모든 엘리먼트와 일치
  • [attributeFilter1][attributeFilter2][attributeFilterN] : 지정한 속성 필터 셀럭터와 일치하는 모든 엘리먼트와 일치

7. 자식 필터 셀렉터

  • :nth-child(index/even/odd/equation) : N/짝수/홀수/공식에 따른 번째 자식 엘리먼트와 일치
  • :first-child : 첫 번째 자식 엘리먼트
  • :last-child : 마지막 자식 엘리먼트
  • :only-child : 동기(형제)가 없는 자식 엘리먼트와 일치

8. 폼 셀렉터

  • :input : 폼 엘리먼트와 일치 (input, select, textarea, button)
  • :text : 텍스트 엘리먼트 (input[type=text])
  • :password : 패스워드 엘리먼트 (input[type=password])
  • :radio : 라디오 엘리먼트 (input[type=radio])
  • :checkbox : 체크박스 엘리먼트 (input[type=checkbox])
  • :submit : 전송버튼 엘리먼트(button[type=submit]이나 input[type=submit])
  • :image : 폼 이미지 엘리먼트(input[type=image])
  • :reset : 리셋 버튼 엘리먼트(button[type=reset]이나 input[type=reset])
  • :button : 모든 버튼 엘리먼트 ( input[type=submit],  input[type=reset], button)
  • :file : 모든 파일 엘리먼트 (input[type=file])
  • :hidden : 감취진 엘리먼트만 선택

9. 폼 필터 셀렉트

  • :enabled : 활성화 상태인 모든 폼 엘리먼트와 일치
  • :disabled : 비활성화 상태인 모든 폼 엘리먼트와 일치
  • :checked : 선택된 체크박스나 라이오 버튼 엘리먼트와 일치
  • :selected : 선택된 엘리먼트와 일치 
2009/07/16 17:12 2009/07/16 17:12

Trackback Address :: https://youngsam.net/trackback/560