[CSS] CSS 선택자

CSS에서는 스타일을 적용할 대상을 선택하기 위해 선택자를 사용합니다.

기본 선택자

1) HTML 요소 선택자

<style>
  h2 { color: blue; }
</style>

2) 아이디(id) 선택자

<style>
  #heading { color: blue; }
</style>

3) 클래스(class) 선택자

<style>
  .headings { color: blue; }
</style>

4) 그룹 선택자

<style>
  h2, h3 { color: blue; }
</style>

결합 선택자

1) 자손 선택자

<div>태그의 하위 요소 중에서 <p>태그를 모두 선택

<style>
  div p { color: blue; }
</style>

2) 자식 선택자

<div>태그의 바로 밑에 존재하는 하위 요소 중에서 <p>를 모두 선택

<style>
  div > p { color: blue; }
</style>

동위 선택자

동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택

동위 관계란?
HTML 요소의 계층 구조에서 같은 부모(parent) 요소를 가지고 있는 요소들

일반 동위 선택자

<div>태그와 동위 관계에 있는 요소 중에서 <div>태그보다 뒤에 존재하는 <p> 태그 모두 선택

<style>
  div ~ p { color: blue; }
</style>

인접 동위 선택자

<div>태그와 동위 관계에 있는 요소 중에서 <div>태그의 바로 뒤에 존재하는 <p>태그 모두 선택

<style>
  div + p { color: blue; }
</style>

의사 클래스

선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용

의사 클래스의 문법

선택자: 의사클래스이름 {속성: 속성값;}

1) 동적 의사 클래스

• link: 사용자가 아직 한 번도 이 링크를 통해서 연결된 페이지를 방문하지 않은 상태 선택(기본 상태)
• visited: 사용자가 한 번이라도 이 링크를 통해서 연결된 페이지를 방문한 상태 선택
• hover: 사용자의 마우스 커서가 링크 위에 올라가 있는 상태 선택
• active: 사용자가 마우스로 링크를 클릭하고 있는 상태 선택
• focus: 포커스를 가지고 있는 input 요소를 모두 선택

2) 상태 의사 클래스

• ckecked: 체크된 상태의 input 요소를 모두 선택
• enabled: 사용할 수 있는 input 요소 모두 선택
• disabled: 사용할 수 없는 input 요소 모두 선택

3) 구조 의사 클래스

• first-child
• last-child
• nth-child
• nth-last-child
• first-of-type
• last-of-type
• nth-of-type
• nth-last-of-type