Publishing/Css

Css란[3]

Raconer 2023. 4. 15. 16:52
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