[CSS] 선택자 (중요)

선택자 CSS 표현

선택자	HTML	CSS
전체		*
Tag	<a></a>	a { }
Class	< class = "a" >	.a{ }
Id	< id = "a">	#a { }
속성	< a for = "b" >	[for=b]
자식	<a>      <b>            < tag >      </b> </a>	a > b { }
형제	<a><b><b><c><b>	a ~ b { }
인접형제	<a><b><b><b>	a + b { }
가상	<a><b><a><a><a><a>	a:b:nth-child(2) { }
	<a><b><a><a><a><a>	b:b:nth-child(2) { }
	<a><b><a><a><a><a>	a:nth-of-type(2) { }
	<a><b><a><a><b><a>	b:nth-of-type(2) { }

 

하위 선택자 - 모든 하위 태그를 포함

ex) a b { } -> b 태그에 속한 모든 하위 태그를 포함

 

속성 선택자

[~=] 포함되는것

[^=] 정규표현식에서 시작하는 것을 의미

[$=] 끝을 의미

[*=] 클래스명 중에 일부만

 

가상 선택자

:checked -> 라디오/체크박스 선택 했을때
:hover -> 마우스를 가져다 댔을때
:active -> 마우스로 누르고 있을때
:focus -> <input>에서 해당 박스를 클릭 했을 때
:visited -> 하이퍼링크 색상변경

가상 클래스 선택자
:nth-child(n)	문서 구조상 같은 부모의 n번째 자식 요소
:nth-of-type(n)	문서 구조상 같은 부모의 같은 유형 자식 중 n번째 요소
:first-child	문서 구조상 같은 부모의 처음 자식 요소
:last-child	문서 구조상 같은 부모의 마지막 자식 요소
:first-of-type	문서 구조상 같은 부모의 같은 유형 자식 중 처음 요소
:last-of-type	문서 구조상 같은 부모의 같은 유형 자식 중 마지막 요소
:only-child	자식 요소가 1개인 부모 요소
:empty	자식 요소가 없는 요소
가상요소 선택자 : 개념적으로만 존재
::after	특정 요소의 내용 뒤
::before	특정 요소의 내용 앞
::selection	Drag 해서 선택되는 영역
::first-letter	특정 요소의 첫번째 글자
::first-line	특정 요소의 첫번째 행