css의 선택자의 종류 !

1. 기본 선택자

• 전체를 선택해주는 * {}
• tag를 선택해주는 태그명 {}
• class를 선택해주는  .클래스명{}
• id를 선택해주는 #아이디명 {}

2. 복합 선택자

• 일치 선택자 ex) div.container {}  => <div> 태그이면서 class 속성이 container 인 요소를 찾아준다.
• 자식 선택자 ex) ul> li {} => <ul> 태그의 자식 요소인 <li> 태그를 찾아준다.
• 후손 선택자 ex) div li {} => <div> 태그의 후손 요소인 <li> 태그를 찾아준다. (자식도 후손에 포함이 된다)
• 인접 형제 선택자 ex) div+.container {} => <div> 태그의 다음 형제 요소 중에 class 속성이 container 인 요소중 가장 인접해있는 요소를 찾아준다.
• 일반 형제 선택자 ex) div~.container {} => <div> 태그의 다음 형제 요소 중에 class 속성이 container 인 요소를 모두 찾아준다.

3. 가상 클래스 선택자

• 요소:hover 요소에 마우스가 올라가 있는 동안에만 동작!
• 요소:active 요소를 클릭하고 있는 동안에만 동작!
• 요소:focus 요소가 focus 된 동안에만 동작! (대화형 콘텐츠 나 tapindex 속성이 부여된 요소만 사용 가능)

4. 가상 요소 선택자

• 요소::before 요소 내부의 앞쪽에 내용을 삽입할 수 있다. 사용할때는 content 속성을 필수로 사용해야한다.
• 요소::after 요소 내부의 뒤쪽에 내용을 삽입할 수 있다. 사용할때는 content 속성을 필수로 사용해야한다.