[CSS] 속성 선택자, 가상 클래스 선택자

속성 선택자

---

특정 스타일이 적용되는 위치가 속성인 선택자

 

 

속성 선택자의 종류

---

	형식	설명
1	[속성] {속성 : 속성 값: ...}	[ ]의 속성을 찾아 스타일 적용
ex	a [href] {/*css코드*/}	href 속성이 있을 경우 스타일 지정
2	[속성=값] { 속성 : 속성 값; ... }	속성과 지정한 값이 일치하는 경우 스타일 적용
ex	input [ type = "email" ] {/*css코드*/}	input 태그의 type이 email 이라면 스타일 적용
3	[속성~=값] { 속성 : 속성 값; ... }	속성과 지정한 값이 일치하는 경우 스타일 적용 (단, 비교 대상이 다수라면 하나의 조건만 만족시켜도 스타일을 적용)
ex	h2 [example="test" ] {/*css코드*/} h2 [example="code"] {f/*css코드*/}	example이 test 또는 code를 포함하고 있다면 스타일 적용. 둘 다 포함하고 있다면 두 스타일을 모두 적용
4	[속성^=값] { 속성 : 속성 값; ... }	지정한 문자로 시작할 경우 스타일 적용
ex	a [href ^= "http://"] {/*css코드*/ }	href가 'http://'로 시작하면 스타일 적용
5	[속성$=값] { 속성 : 속성 값; ... }	지정한 문자로 끝날 경우 스타일 적용
ex	a [href $= ".com"] { /*css코드*/}	href가 '.com'으로 끝나면 스타일 적용
6	[속성|=값] { 속성 : 속성 값; ... }	지정한 값으로 시작할 경우 스타일 적용
ex	a [href |="http://"] {/*css코드*/ }	htef가 'http://'로 시작하면 스타일 적용
7	[속성*=값] { 속성 : 속성 값; ... }	지정한 값이 있을 경우 스타일 적용
ex	a [href *="tistory"] { /*css코드*/}	htef가 'tistory'를 포함하고 있다면 스타일 적용

 

 

가상 클래스 선택자

---

input 태그나 id와 같이 실제로 코드로 작성되어 있지는 않지만 필요에 따라 가상으로 클래스를 만들어 사용하는 선택자.

 

 

 

가상 클래스 선택자의 종류

---

	형식	설명
1	:hover	마우스 커서를 놓았을 때의 스타일 지정
ex	li : hover {/*css코드*/}	<li> 태그에 마우스 커서를 놓았다면 스타일 적용
2	:active	특정 항목이 활성화되었을 때의 스타일 지정
ex	a : active {/*css코드*/}	<a> 태그를 클릭해 활성화했다면 스타일 적용
3	:link	미방문 링크 상태일 때 스타일 지정
ex	a : link {/*css코드*/}	사용자가 링크를 클릭하지 않은 상태라면 스타일 적용
4	:visited	방문한 링크 상태일 때 스타일 지정
ex	a : visited {/*css코드*/}	사용자가 링크를 클릭한 후라면 스타일 적용
5	:focus	포커스가 맞춰졌을 때 스타일 지정
ex	li : focus {/*css코드*/}	<li> 태그에 포커스가 맞춰졌다면 스타일 적용