<webapp/selector/selector_01.html>
🔍 CSS 선택자, CSS Selector -> 잘 알아야 CSS, JS 잘 할 수 있음
- CSS를 적용하기 위해 HTML문서의 특정 태그 요소를 선택하는 문법
- 선택자를 이용하여 선택된 태그 요소들에게 공통 스타일을 일괄적으로 적용할 수 있음
➰ 선택자의 종류
- 전체 선택자 👉🏻 사용 빈도수가 적음
* { 스타일 시트 }--------------------- 👇🏻 밑의 세 가지 많이 사용 -------------------
- 태그 선택자
tagName{ 스타일 시트 }- 아이디 선택자 👉🏻 해당 아이디를 부여받은 태그 하나
#idName { 스타일시트 }- 클래스 선택자
.className{ 스타일 시트 }- 복합 선택자
둘 이상의 선택자를 조합하여 복합적으로 사용하는 방법
선택자들로 지정된 요소들의 관계를 따져서 태그들을 선택
1. 하위(자손) 선택자, Descendant
E F: E요소들의 하위 요소인 F들을 선택div p {} div태그들의 자손들 중에서 모든 p태그를 선택 #board .title {} id가 board인 요소의 자손 중에서 class가 title인 태그들을 선택2. 자식 선택자, Child
E > f: E 요소의 자식인 F들을 선택3. 형제 선택자, Sibling
E + F: E 요소의 인접한 형제 F를 선택
👉🏻 E요소의 바로 뒤에 붙어있는 F에 해당하는 요소 한 개만 선택
E ~ F: E요소의 일반 형제 F를 선택
👉🏻 E요소를 뒤따르는 모든 F요소 전부를 선택
- 속성 선택자
요소의 HTML속성(Attribute)을 이용하여 선택
[attr]attr 속성을 가지고 있는 모든 태그를 선택[class] {} class 속성을 가진 모든 태그 [checked] {} checked 속성을 가진 모든 태그
[attr="val"]: attr속성의 값이 띄어쓰기까지 "val"과 전부 완전 일치해야 선택
[attr~="val"]: attr속성의 값이 val단어를 완전 포함하는 태그를 선택 👉🏻 띄어쓰기로 구분된 단어가 같은 값을 가지고 있으면 선택------------ 활용하면 편하긴 하지만 보통
~까지만 많이 사용 👉🏻~이면 대강 다 가능 --------------
[attr^="val"]: attr속성의 값이 "val"로 시작하는 태그를 선택
[attr$="val"]: attr속성의 값이 "val"로 끝나는 태그를 선택
[attr*="val"]: attr속성의 값이 "val"을 부분 포함하는 태그를 선택
[attr|="val"]: attr속성의 값이 "val"과 같거나 "val-"로 시작하는 태그를 선택
- 가상 선택자, Pseudo Selector, 의사 선택자
HTML문서에는 실제로 존재하지 않는 요소를 선택하는 선택자 👉🏻 HTML 코드로는 표현되지 않는 특징들을 이용하여 요소를 선택
가상 클래스 선택자, 가상 요소 선택자로 나뉨
1. 가상 클래스 선택자 👉🏻 동적으로 움직이는 것처럼 느껴지는 경우가 있음
:hover: mouseover, mouseout 이벤트에 반응하여 요소를 선택 ➡ 마우스 기반 작동
mouseover : 요소에 마우스가 올라갔을 때 발생 / mouseout : 요소에서 마우스가 내려갔을 때 발생
:active: mousedown에 반응 ➡ 마우스 기반 작동
mousedown : 마우스 눌림이 발생
:link:<a>태그의 방문 전 상태를 선택
:visited:<a>태그의 방문 후 상태를 선택
:disabled: 비활성화 상태의 요소를 선택
:enabled: 활성화 상태의 요소를 선택
:checked: checked 상태의 요소를 선택 👉🏻 checked, radio
:focus: focus 상태인 요소 👉🏻 사용자의 입력이 가능한 상태
:empty: 컨텐츠가 비어있는 요소 👉🏻 내용물, 자식 요소가 없는 태그 요소2. 가상 클래스 선택자 - 순서 기반
:root: 최상위 태그 선택 👉🏻<html>➡ 선택자로 사용하면 됨 굳이 root를 사용할 일 거의 없음
:nth-child(n): 앞에서부터 n번째인 요소 선택 ➡ 형제들 중 n번째
:nth-last-child(n): 뒤에서부터 n번째인 요소 선택
:first-child: 형제들 중 첫번째 요소 선택
:last-child: 형제들 중 마지막 요소 선택
:only-child: 유일한 자식요소 선택(형제요소가 없는 상태)
:only-of-type: 형제들 중 유일한 타입(태그)인 요소 선택 👉🏻 형제들이 있어도 태그타입이 단독일 때3. 가상 요소 선택자 👉🏻
:하나를 써도 되지만 클래스와 구분 겸 과거부터 써왔던 겸 해서::두개로 작성
::before: 태그의 앞에 가상 요소를 추가
::after: 태그의 뒤에 가상 요소를 추가
::first-line: 요소의 첫번째 줄(텍스트)을 선택
::first-letter: 요소의 첫번째 문자(글자)를 선택
- 부정 선택자
:not(selector): 선택자 조건 selector를 만족하지 않는 요소를 선택
👉🏻 잘못 선택하면 너무 많은 아이들이 선택되므로 조심해야 함
ul태그 선택자로 선택되지 않는 요소들을 선택
:not(ul)
클래스 속성값으로 blue가 없는 div태그 선택
div:not(.blue)