[CSS] 선택자(selector) 정리

 

🔗 기본 선택자

 

태그명	태그 선택
.class명	class 선택
#id명	id 선택

🔗 전체 선택자

 

*

전체 선택

 

 

🔗 자식 선택자

 

>

자식(직계) 선택

🔗 동위 선택자

 

~	모든 뒤 동위 선택
+	바로 뒤 동위 선택

 

 

🔗 속성 선택자

 

[속성="값"]

 

ex) ul li input[type='text']{}

 

 

 

🔗 속성값 일치 선택자

 

~=	해당 단어 포함 선택 (띄어쓰기 기준)
*=	해당 단어 포함 선택
^=	해당 단어로 시작 선택
|=	해당 단어로 시작 선택
$=	해당 단어로 끝 선택

 

ex) h1[title*='제목']{}

 

 

 

🔗 상태 선택자

 

:checked	체크된 상태
:enabled	수정 가능 상태
:disabled	수정 불가능 상태
:focus	초점이 맞춰진 상태

🔗 child, of-type

 

child => 부모 기준 자식들

:first-child	첫 번째 자식 선택
:last-child	마지막 자식 선택
:nth-child(n)	n 번째 자식 선택

of-type => 본인 기준 형제들

:first-of-type	첫 번째 선택
:last-of-type	마지막 선택
:nth-of-type(n)	n 번째 선택

(+) even : 짝수 (2n) / odd : 홀수 (2n+1)

 

 

 

🔗 전후 선택자

 

::before	앞 공간 선택
::after	뒷 공간 선택

🔗 부정 선택자

 

:not()

제외하고 나머지 선택

🔗 그 외

 

::first-letter	앞 글자만 선택
::first-line	첫 줄만 선택

::selection

click+drag 상태

 

 

---

💡 같이 보면 좋을 Post

[CSS] 왕초보를 위한 font / background / border 속성 총정리