CSS에서 스타일을 적용할 대상을 선택하기 위해서 사용하는 선택자.
앞에서 나왔던

• html 요소
• id
• class
• group

선택자들 외에 추가 내용

전체 선택자

CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택.
*사용

<style>
	*{
    color: red;
   }
</style>

속성 선택자

특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택.

기본 속성 선택자

• [속성이름] 선택자
  특정 속성을 가지고 있는 요소를 모두 선택

• [속성이름 = "속성값"] 선택자
  특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택

문자열 속성 선택자

HTML 요소가 가지고 있는 특정 속성의 속성값 내에 특정 문자열을 확인하여 선택한다.

• [속성이름 ~= "속성값"] 선택자
  특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택

  이 선택자는 띄어쓰기를 기준으로 단어를 인식한다.
  즉, 하이픈(-)으로 연결된 단어는 전부 하나의 단어로 인식하며, 각각 별도의 단어로 인식하지 않는다.

• [속성이름 |= "속성값"] 선택자
  특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택

  속성값이 일치하고 바로 다음에 -가 나와도 인식한다.

• [속성이름 ^= "속성값"] 선택자
  특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택

• [속성이름 $= "속성값"] 선택자
  특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택

• [속성이름 *= "속성값"] 선택자
  특정 속성의 속성값에 특정 문자열를 포함하는 요소를 모두 선택

결합 선택자

하나 이상의 선택자를 포함할 수 있고, 연관된 선택자들 간의 관계를 설정한다.

자손 선택자

(descendant selector)
한 칸 띄어쓰기로 적용,
해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택한다.

Ex)
div p {스타일;}
: <div>태그 안의 <p>태그를 모두 선택.

자식 선택자

(child selector)
>로 적용,
해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택한다.
상위, 혹은 하위 요소를 더 표시하려면 > 여러개를 사용 가능하다.

Ex)
div > p {스타일;}
: <div>태그 안의 <p>태그를 모두 선택.
하지만 <div>태그 안에 다른 태그 안에 <p>태그가 있다면, 그 <p>태그는 선택되지 않는다.

동위 선택자

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

동위관계
: HTML 요소의 계층 구조에서 같은 부모(parent) 요소를 가지고 있는 요소들을 의미하고, 이러한 동위 관계에 있는 요소들을 형제(sibling) 요소라고 한다.

일반 동위 선택자

(general sibling selector)
~로 적용,
해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

Ex)
div ~ p {스타일;}
: 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그보다 뒤에 존재하는 <p>태그를 모두 선택.

인접 동위 선택자

(adjacent sibling selector)
+로 적용,
해당 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

Ex)
div + p {스타일;}
: 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그의 바로 뒤에 존재하는 <p>태그를 모두 선택