CSS - Selector (셀렉터)

우선 CSS 셀렉터는 어떤 요소에 디자인 적용을 할지 선택하는 역할을 하는 것을 의미합니다.

---

📌 selector의 동작 원리

CSS 셀렉터는 CSS 규칙의 첫번째 부분으로 규칙 내부의 속성 값을 적용하기 위해서 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려줍니다. 브라우저는 해당 셀렉터가 가리킨 요소에 선언부에 작성된 디자인 값을 적용하는 식으로 동작합니다.

---

📌 selector의 종류

셀렉터의 종류에는 type 셀렉터, id 셀렉터, class 셀렉터, attribute 셀렉터, pseudo-class 셀렉터(가상 클래스 선택자), pseudo-element 셀렉터(가상 요소 선택자) 등이 있습니다.

⭐ type 셀렉터

[작성 : tag { 선언 }]

HTML 문서 내 모든 해당 요소를 선택하는 선택자

• 전체적으로 일관된 적용이 필요할 때 사용

• 넓은 범위에 적용이 되기 때문에 보통 코드 상단에 작성

⭐ id 셀렉터

[작성 : #id { 선언 }]

html의 전역속성인 id를 이용해 해당 태그를 선택하는 선택자

⭐ class 셀렉터

[작성 : .class { 선언 }]

html의 전역속성인 class를 이용해 해당 태그들을 선택하는 선택자

---

⭐ attribute 셀렉터

특정 속성을 가지고 있는 요소만 선택하는 선택자

• 해당 속성을 가지고 있으면 선택 [ 작성 : tag[속성] { 선언 }]
• 속성 값을 지정해서 선택 [ 작성 : tag[속성=“값”] { 선언 }]
  
• 속성 값의 일부만 일치하더라도 선택
  해당 값으로 시작하면 모두 선택 [속성^=”값”]
  해당 값으로 끝나면 모두 선택 [속성$=”값”]
  해당 값을 포함하면 모두 선택 [속성*=”값”]
  

---

⭐ Pseudo-class 셀렉터 (가상 클래스 선택자)

[작성 : A(태그or 속성) : ~ { 선언 }]

다른 특징으로 디테일하게 선택이 가능한 선택자

• n번째 자식요소를 선택하는 방식
  • 첫번째 자식 - A:first-child { 선언 }
  • 마지막 자식 - A:last-child { 선언 }
  • n번째 자식 - A:nth-child( 숫자or함수 ) { 선언 }

• n번째 해당요소를 선택하는 방식
  • 첫번째 요소들 - A:first-of-type { 선언 }
  • 마지막 요소들 - A:last-of-type { 선언 }
  • n번째 요소들 - A:nth-of-type( 숫자or함수 ) { 선언 }

• not 셀렉터
  A 요소들 중 B 요소는 제외하고 선택 - A:not(B) { 선언 }

• 상호작용에 의한 상태변화 셀렉터 (동적 요소)
  [ 작성 : 콜론(:) 뒤에 셀렉터를 붙여 작성 ]

link / visited 셀렉터
:link - A요소에서 link(하이퍼링크) 디자인 선택
:visited - A요소에서 visited(방문한 링크) 디자인 선택


hover / active / focus 셀렉터
:hover - 마우스를 버튼 위에 가져갈 때 버튼의 변화 선
:active - 버튼을 클릭하고 떼기 전까지의(눌린) 상태 선택
:focus - 마우스 대신 키보드로 선택할 때, 해당 버튼 지정 시 상태 (보통 tab키로 지정) 또는 text 입력창을 클릭했을 때 상태

• 불리안 속성을 가지는 태그를 2가지 상태에 따라 다르게 디자인 할 때의 셀렉터

enabled / disalbed / checked
:checked - 태그가 checked 상태일 때
:enabled - 태그에 disabled 속성을 걸어놨을 때
:checked - 태그가 checked 상태일 때

---

⭐ Pseudo-element 셀렉터 (가상 요소 선택자)

[ 작성 : A(태그or 속성) :: ~ { 선언 }]

가상 요소를 만들어 선택하는 선택자

• before / after

A::before { content: ’B’ ;}
    A요소 태그의 콘텐츠 앞에 html에는 존재하지 않는 디자인요소 B를 넣음
A::after { content:’B’ ;}
    A요소 태그의 콘텐츠 뒤에 html에는 존재하지 않는 디자인요소 B를 넣음

• firtst-leter / first-line / selection

A::first-leter - 가장 첫번째 글자 디자인
A::first-line - 가장 첫번째 줄 디자인
A::selection - 드래그를 해서 영역을 선택할 때 보이는 배경과 콘텐츠 디자인