[CSS] 기초 5

연결 선택자

= 선택자와 선택자를 연결하여 css 적용 대상을 제한

 

하위 선택자	부모 요소에 포함된 모든 하위 요소에 스타일이 적용. 자식 및 손자까지 적용.
rule	상위요소 하위요소 { ... }
ex.	div p { ... }

 

자식 선택자	자식만 적용됨
rule	부모요소 > 자식요소 { ... }
ex.	div > p { ... }

 

인접 형제 선택자	요소1 과 같은 깊이(depth) 이면서 바로 다음 행에 오는 요소2에 적용
rule	요소1 + 요소2 { ... }
ex. css	h1 + p { ... }
ex. html	<div>
	<h1>a</h1>
	<p>b</p>
	</div>

 

형제 선택자	요소1 과 같은 깊이(depth) 인 모든 요소2에 적용
rule	요소1 ~ 요소2 { ... }
ex. css	h1 + p { ... }
ex. html	<div>
	<h1>a</h1>
	<p>b</p>
	<p>c</p>
	</div>

 

 

속성 선택자

[속성] 선택자	지정한 속성을 가진 요소를 찾아 스타일 적용
rule	선택자 [ 속성명 ] { .. }
ex. css	a[href] { background: blue }
ex. html	<a>다음</a> <!-- 적용안됨 -->
	다음</a>

 

 

[속성 = 값] 선택자	지정한 속성을 가진 요소를 찾아 스타일 적용
rule	선택자 [ 속성명=값 ] { .. }
ex. css	a [ target = "_black" ] { ... }
ex. html	다음</a>
	<a href="#" target="_blank">구글</a>

 

 

가상 클래스와 가상 요소

가상 클래스	:link	방문하지 않은 링크에 적용
	:visited	방문했던 링크에 적용
	:hover	해당 요소에 마우스 오버 시
	:active	해당 요소를 활성화 시(ex. 마우스로 클릭 시)
	:focus	해당 요소에 초첨 맞출 시
	:target	앵커 대상에 적용
	:enabled	해당 요소 사용 가능 상태 시
	:disabled	해당 요소 사용 불가 상태 시
	:checked	해당 요소가 선택 상태 시
	:not( 조건 )	괄호 안의 선택자나 클래스가 아닌 것 전부에 적용 시

 

ex. html

<a>다음</a>

다음</a>

<a href="#" target="_blank">다음</a>

<div>

구글</a>

<a href="#p1">구글</a>

<a href="#p2">구글</a>

<input>

<input>

<p id=p1>aaa</p>

<p id=p2>bbb</p>

</div>

 

ex. css

* { color: pink; background-color: gray; }

a[href] { background: blue }

a[target="_blank"] { background: green }

div>a:link { background: red }

div>a:visited { background: orange }

div>a:hover { background: yellow }

div>p:active { background: green }

div>input:focus { background: orange }

div>p:target { background: purple }