[CSS] CSS SELECTOR

📌 CSS SELECTOR

✅ 기본 선택자

전체 선택자 (*)

태그 선택자 (tag)

class 선택자 (.)

id 선택자 (#)

✅ 복합 선택자

일치 선택자 

ABCXZY 선택자 ABC와 XYZ를 동시에 만족하는 요소

 

자식 선택자

ABC>XYZ 선택자 ABC의 자식 요소 XYZ 선택

 

후손 선택자 

ABC XYZ 선택자 ABC의 하위 요소 XYZ 선택('띄어쓰기' 중요!)

 

인접 형제 선택자 

ABC+XYZ 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

 

일반 형제 선택자 

ABC~XYZ 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

 

✅ 가상 클래스 선택자(Pseudo-classes)

사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 

각 요소의 상황에 따라 사용자가 원하는 요소를 선택 할 때 사용

특정 요소를 부정할 때 사용

 

가상 클래스 선택자(Pseudo-classes)

사용자의 행동에 따라 변화: hover, active, focus

요소의 상황: first-child, last-child, nth-child

부정 선택: not

 

hover

ABC:hover 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

 

avtive

ABC:active 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

 

focus

ABC:focus 선택자 ABC 요소가 포커스되면 선택

ex) id입력창 선택시 파란 테두리 뜨는 것 ..

 

✔️ focus가 안되는 요소에 강제로 추가하기 

• body 속성으로 tabindex="-1" 값을 주어서 포커스 효과를 줄 수 있음
• Tab 키를 눌러서 포커스를 하는 순서를 지정하는 속성
• "-1" 이외의 값을 넣을 경우 기존 페이지의 포커스 흐름이 깨지기 때문에 비추천

 

first-child

ABC:first-child 선택자 ABC가 형제 요소 중 첫째라면 선택

 

last-child

ABC:last-child 선택자 ABC가 형제 요소 중 막내라면 선택

 

nth-child

ABC:nth-child(n) 선택자 ABC가 형제 요소 중 (n)째라면 선택

(2n, 2n-1 등을 넣어 짝수, 홀수 선택 가능)

 

not

ABC:not(XYZ) 선택자 XYZ가 아닌 ABC 요소 선택

 

✅ 가상 요소 선택자 

inline 요소 

선택 된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자 

반드시 content라는 속성을 사용해야 함(빈 값"" 이랃도 넣어 주어야 작동함)

실제로 의미 없는 HTML 태그를 만들지 않고 요소 삽입이 가능하여 자주 사용함

ex) 쇼핑몰 페이지 메뉴에 hot, 추천 등을 넣기 위해 별도로 태그를 삽입 하는 것이 아니라 

가상 요소 선택자를 활용하여 처리하면 편리함 

 

before

ABC::before 선택자 ABC 요소의 내부 앞에 내용(content)를 삽입

 

after

ABC::after 선택자 ABC 요소의 내부 뒤에 내용(content)를 삽입

 

✅ 속성 선택자

지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자 

[ABC] 속성 ABC을 포함한 요소 선택 

[ABC="XYZ"] 속성 ABC를 포함하고 같이 XYZ인 요소 선택