꽃피는봄날 2021. 6. 9. 15:45

선택자 기본 서식

서식 설명
* 모든 요소를 선택
<요소이름> 요소 이름으로 선택
.<클래스이름> 클래스 이름으로 선택
#<ID이름> ID 이름으로 선택

 

선택자들의 관계를 지정하는 서식

서식 설명
<선택자>, <선택자> 쉼표로 구분된 여러개의 선택자를 모두 선택
<선택자> <선택자> 자손선택,  앞에 적은 선택자의 후손 중 -> 뒤에 적은 선택자에 해당하는 것을 모두 선택 (자손, 자식, 후손 모두 포함)
<선택자> > <선택자> 자식 선택,  앞에 적은 선택자의 자손 중 -> 뒤에 적은 선택자에 해당하는 것을 모두 선택 (직계 자식만 선택)
<선택자> * <선택자> 바로 이후에 오는 자식요소는 선택되지 않고 -> 자식 이후에 오는 자손들만 선택
<선택자> + <선택자> -인접 형제 선택자
-같은 계층에서 바로 뒤에 있는 요소를 선택

<선택자1>~<선택자2> -일반 형제 결합자
-첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.

ex) p ~ span ->  <p> 요소를 뒤따르는 모든 <span> 요소를 선택

 

선택자 속성을 기반으로 지정하는 서식

 

가상클래스 선택자

참고사이트1

참고사이트2