FRONT END/CSS
[CSS] 선택자 selector
circle kim
2020. 11. 28. 18:45
<head>
<style>
*{} 전체 선택자(*)
태그명{} 태그 선택자(태그명)
#id{} id 선택자(#아이디명)
.class{} class 선택자 (.클래스명)
부모선택자>자식선택자{} 부모선택자의 자식선택자들 선택 (>)
부모선택자 자식선택자{} 부모선택자의 자식선택자들 선택 ( )
형제A선택자+형제B선택자{} 형제A선택자 바로 뒤의 형제 선택자B 선택(+)
형제A선택자~형제B선택자{} 형제A선택자 뒤의 모든 형제 선택자B 선택(~)
[속성]{} 속성을 가진 모든 태그 선택([속성명])
[속성="값"]{} 특정 값을 가진 속성을 가진 모든 태그 선택([속성명="값"])
선택자[속성~="값"]{} 값을 단어로 포함하면 선택. 값 앞뒤에 공백이 있다면 선택(~=)
선택자[속성|="값"]{} 값과 동일하거나 동일한 값으로 시작할 경우 선택(|=)
선택자[속성*="값"]{} 값을 하나라도 포함하면 선택(*=)
선택자[속성^="값"]{} 값으로 시작하면 선택(^=)
선택자[속성$="값"]{} 값으로 끝나면 선택($=)
a:link{} 방문 전 (선택자:link)
a:visited{} 방문 후 (선택자:visited)
a:hover{} 마우스 올리면 (선택자:hover)
a:active{} 클릭한 순간 (선택자:active)
input:checked{} 선택되어 지면
input:disabled{} 비활성화 되면
input:enabled{} 활성화 되면
input:focus{} 마우스 커서로 선택되면
p:empty{} 비어있을 경우
p:fist-child{} 첫 자식(첫 자식이 다른 자식이면 선택안됨)
p:last-child{} 마지막 자식
p:only-child{} 자식이 하나인 경우
p:fist-of-type{} 첫 자식(첫 자식이 다른 자식이더라도 선택안됨)
p:nth-child(n){} n번째 자식
p:nth-child(odd){} 홀수 자식
p:nth-child(even){} 짝수 자식
</style>
</head>