CSS 셀렉터(Selector) 종류

.class // 클래스 이름이 class인 모든 엘리먼트

.name1.name2 // 클래스 이름이 name1이거나 name2인 모든 엘리먼트

.name1 .name2 // name1 클래스 안에 있는 name2 클래스

#id // id가 id인 엘리먼트

 

* // 모든 엘리먼트

p // 모든 <p> 엘리먼트

p.class // 클래스 이름이 class인 <p> 엘리먼트

p#id // id가 id인 <p> 엘리먼트

div, p // <div> 엘리먼트와 <p> 엘리먼트

 

div p // <div> 엘리먼트 안의 모든 자손 <p> 엘리먼트 (descendent)

div > p // <div> 엘리먼트 안의 자식 <p> 엘리먼트 (child)

div + p // <div> 엘리먼트 바로 뒤에 있는 <p> 엘리먼트

div ~ p // <div> 엘리먼트 뒤에 오는 모든 <p> 엘리먼트

 

[target] // target 속성이 있는 엘리먼트

[target=_blank] // target="_blank"가 있는 엘리먼트

[title~=flower] // title 속성의 값에 flower가 포함돼 있는 엘리먼트

[lang|=en] // lang 속성의 값이 en으로 시작되는 엘리먼트

a[href^="https"] // href 속성의 값이 https로 시작되는 <a> 엘리먼트

a[href$=".pdf"] // href 속성의 값이 .pdf로 끝나는 <a> 엘리먼트

a[href*="w3schools"] // href 속성의 값에 w3schools가 들어가는 <a> 엘리먼트

 

a:active // 활성화된 링크

p::after // <p> 엘리먼트 뒤에 무언가를 추가하고 싶을 때 쓴다.

p::before // <p> 엘리먼트 앞에 무언가를 추가하고 싶을 때 쓴다.

input:checked // 체크된 <input> 엘리먼트

input:default // 기본 상태의 <input> 엘리먼트

input:disabled // 비활성화된 <input> 엘리먼트

p:empty // 자식이 없는 <p> 엘리먼트 (텍스트 노드 포함)

input:enabled // 활성화된 <input> 엘리먼트

p:first-child // 부모의 첫 번째 자식이면서 <p> 엘리먼트

p::first-letter // <p> 엘리먼트의 첫 번째 글자

p::first-line // <p> 엘리먼트의 첫 번째 줄

p:first-of-type // 부모의 <p> 엘리먼트 자식 중 첫 번째

input:focus // focus가 된 input 엘리먼트

a:hover // 마우스가 위에 올려진 링크

input:in-range // 특정한 범위 내의 값을 지닌 input 엘리먼트???

input:indeterminate // 상태가 결정되지 않은 input 엘리먼트

input:invalid // 유효하지 않은 값을 지닌 input 엘리먼트

p:lang(it) // lang 속성이 it(Italian)과 같은 <p> 엘리먼트

p:last-child // 부모의 마지막 자식이면서 <p> 엘리먼트

p:last-of-type // 부모의 <p> 엘리먼트 자식 중 마지막

a:link // 방문하지 않은 링크

:not(p) // <p> 엘리먼트가 아닌 모든 엘리먼트

p:nth-child(2) // 부모로부터 두 번째 자식인 <p> 엘리먼트

p:nth-last-child(2) // 부모로부터 뒤에서 두 번째 자식인 <p> 엘리먼트

p:nth-last-of-type(2) // 부모의 <p> 엘리먼트 자식 중 뒤에서 두 번째

p:nth-of-type(2) // 부모의 <p> 엘리먼트 자식 중 두 번째

p:only-of-type // 부모의 <p> 엘리먼트 자식만???

p:only-child // 부모의 유일한 자식인 <p> 엘리먼트

input:optional // required라는 속성이 지정되지 않은 엘리먼트

input:out-of-range // 특정한 범위 외의 값을 지닌 input 엘리먼트???

input::placeholder // placeholder라는 속성이 지정된 input 엘리먼트

input:read-only // readonly라는 속성이 지정된 엘리먼트

input:read-write// readonly라는 속성이 지정되지 않은 엘리먼트

input:required // required라는 속성이 지정된 엘리먼트

:root // document의 근본(root) 엘리먼트

::selection // 사용자에 의해 선택된 엘리먼트의 부분

#news:target // 활성화된 #news 엘리먼트???

input:valid // 유효한 값을 지닌 input 엘리먼트

a:visited // 방문한 링크

 

참고 : https://www.w3schools.com/cssref/css_selectors.asp