CSS 셀렉터

T 엘리먼트

태그 이름이 T인 모든 엘리먼트를 선택

ex)

 ◎ $('div')는 문서 안의 모든 div 엘리먼트를 선택

#myid ID

엘리먼트가 ID가 myid인 페이지 내의 유일한 엘리먼트 선택

ex)

 ◎ $('#myid')는 id="myid"인 유일한 엘리먼트 선택

.myclass 클래스

클래스가 myclass인 엘리먼트를 모두 선택

ex)

 ◎ $('.myclass')는 클래스가 myclass인 엘리먼트를 선택

EF 자손 엘리먼트

E 표현식에 해당하는 엘리먼트의 자손 엘리먼트 가운데 F 표현식에 해당하는 엘리먼틀르 선택

ex)

 ◎ $('#container p')는 엘리먼트가 ID가 container인 엘리먼트의 자손 엘리먼트 가운데 태그 이름이 p인 엘리먼트를 선택

E>F 자식 엘리먼트

E 표현식에 해당하는 엘리먼트의 자식 엘리먼트 가운데 F 표현시기에 해당하는 엘리먼트를 선택

ex)

 ◎ $('li>ul')는 <li>엘리먼트의 자식 엘리먼트 가운데 <ul> 엘리먼트를 선택

E+F 이웃 엘리먼트

F 표현식에 해당하는 엘리먼트 가운데 E 표현식에 해당하는 엘리먼트의 바로 다음에 나오는 해당 엘리먼트와 부모 엘리먼트가 같은 엘리먼트를 모두 선택

ex)

 ◎ $('ul+p')는 <ul> 엘리먼트 바로 다음에 나오는 <p> 엘리먼트를 모두 선택

E~F 형제 엘리먼트

F 표현식에 해당하는 엘리먼트 가운데 E 표현식에 해당하는 엘리먼트 다음에 나오고 해당 엘리먼트와 부모 엘리먼트가 같은 엘리먼트를 모두 선택

ex)

 ◎ $('ul~p')는 <ul>엘리먼트의 형제 엘리먼트 가운데 <p> 엘리먼트를 모두 선택

E,F,G 다중 엘리먼트

E, F, G 셀렉터 표현식에 해당하는 엘리먼트를 모두 선택

ex)

 ◎ $('code, em, strong')은 모든 <code>, <em>, <strong> 엘리먼트를 선택

:nth-child(n/even/odd/expr) 순차 자식

특정 엘리먼트의 n번째 자식 엘리먼트를 선택

ex)

 ◎ $('li:nth-child(2)')는 부모 엘리먼트에서 두 번째 자시기 엘리먼트에 해당하는 모든 <li> 엘리먼트를 선택

:first-child 첫 번째 자식

엘리먼트에서 첫 번째 자식에 해당하는 엘리먼트를 모두 선택

ex)

 ◎ $('li:first-child')는 모든 첫 번째 자식 <li> 엘리먼트를 선택

:list-child 마지막 자식

엘리먼트에서 마지막 자식 엘리먼트를 선택

ex)

 ◎ $('li:last-child')는 부모 엘리먼트에서 마지막으로 위치하는 <li>를 모두 선택

:only-child 유일한 자식

엘리먼트의 유일한 자식 엘리먼트(형제 엘리먼트가 없는 엘리먼트)를 선택

ex)

 ◎ $(':only-child')는 페이지 내에서 유일한 자식 엘리먼트를 모두 선택

:not(E) 부정

E 셀렉터 표현식에 해당하지 않는 엘리먼트를 모두 반환

ex)

 ◎ $(':not(.myclass)')는 클래스명이 myclass가 아닌 엘리먼트를 모두 선택

:empty 자식 엘리먼트가 없는 엘리먼트

텍스트 노트를 포함해서 자식 엘리먼트가 없는 엘리먼트를 모두 선택

ex)

 ◎ $(':empty')는 자식 노드가 없는 모든 엘리먼트를 모두 선택

* 전체 선택

모든 엘리먼트를 선택

ex)

 ◎ $('*')는 모든 엘리먼트를 선택