2024. 07. 22 (TIL) CSS 선택자, 가상 클래스, 가상 요소

선택자

기본 선택자

전체 선택자

• 형식 : { / CSS 코드 */ }

타입(태그) 선택자

• 태그명으로 선택자 지정
  -- 형식 : 태그명 { / CSS 코드 / }

아이디 선택자

• id 속성값(아이디명)으로 선택자 지정
  -- 형식 : #id명 { / CSS 코드 / }

클래스 선택자

• class 속성(클래스명)으로 선택자 지정
  -- 형식 : .class명 { / CSS 코드 / }

기본 속성 선택자

• HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정
  -- 형식 : [속성] { / CSS 코드 / }

조합(연결) 선택자

• 선택자와 선택자를 연결해 적용하여 대상을 제한
• combination selector(조합 선택자)

그룹 선택자

• 여러 선택자를 콤마(,)를 사용하여 그룹으로 묶어서 지정
• 형식 : 선택자1, 선택자2,,,,,, 선택자n { / CSS 코드 / }

자식 선택자(child selector)

• 자식 요소에 스타일을 적용
• 선택자 범위를 자식 관계로 제한
  두 요소 사이에 >(부등호)를 이용하여 부모와 자식을 구분
• 형식 : 부모 선택자 > 자식 선택자 { / CSS 코드 / }

하위 선택자(descendant selector)

• 선택자 범위를 자식 및 자손 관계로 제한
• 부모 요소에 포함된 모든 하위 요소에 스타일 적용
• 형식 : 상위 선택자 하위 선택자
• 형식 : 선택자1 선택자2 선택자3,,,,{ / CSS 코드 / }

인접 형제 선택자(adjacent selector)

• 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정
• 같은 부모를 가진 형제 요소 중에서 첫 번째 동생 요소에만 적용
• 요소1과 요소2는 같은 레벨이면서 요소1 이후 첫 번째 요소2에 적용
• 구분자 : +
• 형식 : 이전 선택자 + 대상 선택자 { / CSS 코드 / }

일반 형제 선택자(sibling selector)

• 특정 태그와 형제 관계에 오는 모든 태그를 선택자로 지정
• 형제 요소들에 스타일 적용
• 인접 형제 선택자와 다르게 모든 형제 요소에 적용
• 구분자 : ~
• 형식 : 이전 선택자 ~ 대상 선택자 { / CSS 코드 / }

[속성] 선택자

• 해당 속성이 있는 요소에 적용
• 형식 : 태그[속성] { / CSS 코드 / }

[속성=값] 선택자

• 지정한 속성값이 있는 요소에 적용
• 형식 : 태그[속성=값] { / CSS 코드 / }

[속성~=값] 선택자

• 지정한 속성값(단어별)이 포함된 요소에 적용
• 형식 : 태그[속성~=값] { / CSS 코드 / }

[속성|=값] 선택자

• 지정한 속성값(하이픈 포함, 단어별)이 포함된 요소에 적용
• 형식 : 태그[속성|=값] { / CSS 코드 / }

[속성^=값] 선택자

• 특정 값으로 시작하는 속성을 가진 요소에 적용
• 형식 : 태그[속성^=값] { / CSS 코드 / }

[속성$=값] 선택자

• 속성값이 특정 값으로 끝나면 선택
• 형식 : 태그[속성$=값] { / CSS 코드 / }

[속성*=값] 선택자

• 속성값에 해당 문자열이 포함되면 적용
• 형식 : 태그[속성*=값] { / CSS 코드 / }

가상 클래스, 가상 요소

• 실제로 존재하지 않는 요소
• 존재한다고 가정하고 선택하는 방법
  요소의 상태를 이용하여 선택자를 지정
• 가상 클래스 앞에 : 기호를 붙여서 사용
• 사용자의 동작에 반응하는 가상 클래스 선택자
• 링크 가상 클래스 선택자
• • :link - 링크를 한 번도 방문한 적이 없는 상태
• • :visited - 링크를 한 번 이상 방문한 적이 있는 상태
• 동적 가상 클래스 선택자
• • :hover - 마우스를 올린 상태
• • :active - 마우스로 클릭한 상태
• 입력 요소 가상 클래스 선택자
• • :focus - 입력 요소에 커서가 이동하여 활성화된 상태
• • :checked - 체크박스(레디오버튼) 요소에 체크한 상태
• • :enabled - 상호 작용 요소가 활성화된 상태
• • :disabled - 상호 작용 요소가 비활성화된 상태 - 요소가 서버로 전송되지 않는다.
• • :not - 특정 요소를 제외하고 스타일 적용

구조 가상 클래스

:only-child -> 부모 안에 자식 요소가 하나뿐일 때 자식 요소 선택
A:only-type-of -> 부모 안에 A 요소가 하나뿐일 때 선택
:first-child -> 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택
:last-child -> 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택
A:first-of-type -> 부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택
A:last-of-type -> 부모 안에 있는 A 요소 중에서 마지막 요소를 선택
:nth-child(n) -> 부모 안에 있는 모든 요소 중에서 n 번째 자식 요소를 선택
:nth-of-type(n) -> 부모 안에 있는 모든 요소 중에서 끝에서 n 번째 자식 요소를 선택
A:nth-of-type(n) -> 부모 안에 있는 A 요소 중에서 n 번째 요소를 선택
A:nth-last-of-type(n) -> 부모 안에 있는 A 요소 중에서 끝에서 n 번째 요소를 선택

가상 요소

• 실제로 존재하지 않는 요소
• 존재한다고 가정하고 선택하는 방법
• 화면 꾸미기용, 웹 문서에는 포함되지 않음
• 가상요소 선택자 앞에 :: 를 붙임
• 형식 : 기준 선택자 :: 가상요소 선택자 { / CSS 코드 / }
• ::before - 기준 선택자의 요소의 앞 선택
• ::after - 기준 선택자의 요소의 뒤가 선택
• ::first-line - 특정 요소의 첫 번째 줄에 스타일 적용
• ::first-letter - 특정 요소의 첫 번째 글자에 스타일 적용

이번 부분은 계속 복습하고 복습해서 외워야 할 것 같다.
너무 많이 썼던 것들인데도 불구하고 항상 구글링만 해서 머릿속에 남질 않았다.