728x90
📌 선택자란?
웹 페이지의 특정 요소를 선택하는 것을 선택자(selector)라고 합니다.
주로 CSS, JavaScript, JQuery에서 사용되며,
- 태그(Tag)
- ID
- Class
등을 기준으로 요소를 찾고, 스타일 적용 또는 이벤트를 지정할 수 있습니다.
📘 JQuery 기준 선택자 정리
🔹 1. Tag 선택자
"태그명"
- 예:
$("a") $("div")
🔹 2. ID 선택자
#아이디값
- 예:
$("#test")
🔹 3. Class 선택자
.클래스명
- 예:
$(".test")
🔹 4. 직계 자손 선택자
"부모 > 자식"
- 예:
$("ul > li")
🔹 5. 모든 자손 선택자
"부모 자식"
- 예:
$("div span")
🔹 6. 전체 선택자
*
- 예:
$("*")
🔹 7. 형제 선택자 (바로 다음 형제)
"A + B"
- 예:
$("h1 + p")
🔹 8. 모든 형제 선택자
"A ~ B"
- 예:
$("h1 ~ p")
📌 위치 기반 선택자 (N번째 등)
🔹 첫 번째 자식
$("li:first-child")
🔹 유일한 자식 (형제가 없음)
$("li:only-child")
🔹 A번째 자식
$("li:nth-child(3)")
🔹 뒤에서 A번째 자식
$("li:nth-last-child(2)")
🔹 마지막 자식
$("li:last-child")
📌 타입 기반 선택자 (Tag 기준)
🔹 첫 번째 해당 태그
$("p:first-of-type")
🔹 A번째 해당 태그
$("p:nth-of-type(2)")
"even"
→ 짝수"odd"
→ 홀수An+B
형식도 가능
예:nth-of-type(2n+1)
→ 홀수 번째
🔹 유일한 해당 태그
$("p:only-of-type")
🔹 마지막 해당 태그
$("p:last-of-type")
📌 특수 선택자
🔹 자식이 아무것도 없을 때
$("div:empty")
🔹 특정 요소 제외 (not)
$("div:not(#fancy)")
$("li:not(:first-child)")
$("div:not(.big, .medium)")
이 표는 CSS 선택자와 jQuery 선택자 모두에 적용 가능합니다.
스타일 적용 뿐 아니라 .on()
, .click()
, .addClass()
등의 이벤트 핸들링 시에도 유용하게 활용됩니다.
728x90
'Publishing > Css' 카테고리의 다른 글
Css란[4] (0) | 2023.04.15 |
---|---|
CSS란[2] (0) | 2023.04.15 |
CSS란[1] (0) | 2023.04.15 |