선택자

선택자는 어떤 태그에 스타일을 줄지 선택하는 것이다.

태그 선택자

태그명으로 스타일을 먹일 태그를 선택한다.

<style>
  p{
    color:blue;
  }
</style>
<p>안녕하세요.</p>

아이디 선택자

html 태그의 속성 중 id를 이용해서 태그를 선택한다.

#title

id는 페이지에 단 하나만 사용 가능하다.

<style>
  #title{
    color:green;
  }
</style>
<h1 id="title">아이디가 title 입니다</h1>

클래스 선택자

html 태그의 속성 중 class를 이용해서 태그를 선택한다.

.content

class는 페이지에 여러 번 사용 가능하다.

<style>
  .content {
    color:red;
  }
</style>
<p class="content">클래스가 content 입니다.</p> 

태그 속성 선택자

태그 속성이 적혀있는 태그에만 스타일을 적용한다.

a[target]

<style>
  a[target] {
    color: red;
  }
</style>
<a href="#">이동</a>
<a href="#" target="_blank">새 창으로 이동</a>

문자열 속성 선택자

생략

그룹 선택자

같은 스타일을 여러 선택자에게 먹이고 싶을 때 사용.

, (쉼표)

p, #title, .red{
  color:red;
} 

자식 선택자

특정 태그의 자식태그에 스타일을 먹이고 싶을 때 사용.

> (꺾쇠)

#title > .red{
  color:red;
} 

하위(자손) 선택자

특정 태그의 자식 및 자손 태그에 스타일을 먹이고 싶을 때 사용.

띄어쓰기

#title .red{
  color:red;
} 

인접 형제 선택자

생략

일반 형제 선택자

생략

링크 가상 클래스 선택자

생략

동적 가상 클래스 선택자

생략

입력 요소 가상 클래스 선택자

생략

구조적 가상 클래스 선택자

생략

생략부분 참고
https://thebook.io/080313/0147/