css 선택자

 

전체 선택자	*{.....}
태그 선택자	태그명{....}
클래스 선택자	.클래스명{...}
아이디 선택자	# 아이디명{....}
일치 선택자	태그.클래스{....}  (띄어쓰기 없음)
자식 선택자	.클래스명 or 태그등 >.클래스명 or 태그등{...}
하위 후손 선택자	클래스명 (띄어쓰기) .클래스{...}
인접 형제 선택자	ex)  .orange + li{...}      -> .orange 이 선택자의 다음 형제 요소하나를 선택 <ul>    <li>....</li>    <li class="orange">....</li>    <li>....</li>     -> 이 태그 선택    <li>....</li> </ul>
일반 형제 선택자	ex)  .orange ~ li{...}      -> .orange 이 선택자의 다음 형제 요소 모두 선택 <ul>    <li>....</li>    <li class="orange">....</li>    <li>....</li>     -> 태그 선택    <li>....</li>     -> 태그 선택 </ul>
가상 클래스 선택자	.box : hover{....}    요소에 마우스가 올라가져 있는 동안 선택 .box : active{....}    마우스가 클릭하는 동안 선택 input : focus{....}    포커스가 되면 선택                        포커스가 가능한 태그에서 가능              포커스가 안되는 태그에서 실행하기 위해서는 <div tabindex="-1"> 작성필요 .box : first-child{....}    선택자의 형제요소중 첫째가 선택 .box : last-child{....}    선택자의 형제요소중 막내요소가 선택 .box : nth-child(n숫자 작성){....}    선택자의 n번째 요소 선택 (1부터 시작)           짝수 선택  2n  , even           홀수 선택  2n-1  , odd           2번째부터 선택 n+1             이런식으로도 활용이 가능하다
부정 선택자	ex) .fruits *:not(span){....}  -> 요소들중 span 태그 제외후 다른것 선택
가상 요소 선택자	태그::before{ content : "앞!"}   -> 선택자 요소의 내부 앞에 내용을 삽입 태그::after{ content : "뒤!"}   -> 선택자 요소의 내부 뒤에 내용을 삽입
속성 선택자	[disabled]{......}   disabled 속성이 있는 태그를 찾는다 대괄호 사용 ex) <input type="text" value="ABCD" disabled> [type="password"]{.....} 이렇게 찾는것도 가능