CSS의 선택자

CSS의 선택자는 <style> 태그 내에서 HTML 문서의
특정한 요소를 선택하고 스타일을 적용하는데 사용된다.

기본 선택자

1. 전체(*) 선택자 : 모든 요소를 선택한다.
   (모든 텍스트가 gray 색상으로 바뀐 것을 확인할 수 있다.)


2. 요소(element) 선택자 : 특정 HTML 요소를 선택한다.
   ('h1' 태그의 텍스트 크기가 작아진 것을 확인할 수 있다.)


3. 클래스(class) 선택자 :
   특정 클래스를 가진 요소를 선택하며 클래스 이름 앞에 '.'을 더하여 사용한다.
   (아래와 같이 웹 사이트의 배경이 gray 색상으로 바뀐 것을 확인할 수 있다.)


4. 아이디(id) 선택자 :
   특정 아이디를 가진 요소를 선택하며 아이디 이름 앞에 '#'을 더하여 사용한다.
   (h3 태그의 텍스트 색상이 yellow 색상으로 바뀐 것을 확인할 수 있다.)

복합 선택자

1. 자식(>) 선택자 : 특정 요소의 직계 자식을 선택한다.
   (아래와 같이 모든 p 태그의 텍스트 색상이 바뀐 것을 확인할 수 있다.)


2. 후손(공백) 선택자 : 특정 요소의 모든 후손 요소를 선택한다.
   (p 태그들의 텍스트 색상이 다시 바뀐 것을 확인할 수 있다.)


3. 형제(+ 또는 ~) 선택자 : 형제 선택자는 특정 요소의 형제 요소를 선택한다.
   
   • 인접 형제 선택자 (+) :
     특정 요소 바로 다음에 오는 형제 요소를 선택한다. (h1 태그 바로 다음에 오는 p 태그의 텍스트 색상이 변경되었다.)
   
   
   • 일반 형제 선택자 (~) :
     특정 요소 뒤에 오는 모든 형제 요소를 선택한다.
     (h1 태그 다음의 모든 p 태그의 텍스트 색상이 변경되었다.)

속성 선택자

기본 문법은 "요소[속성명]"이며 속성의 값과는 무관하게 해당 속성을 가진
요소가 선택된다.

• class 속성이 있는 모든 p 요소의 색상을 RED 색상으로 바꾼다.


• href 속성 값이 "주소 값"인 a 요소를 Brown 색상으로 바꾼다.

기본 선택자 참고 블로그
복합 선택자 참고 블로그
속성 선택자 참고 블로그