[19] 04/20 자바스크립트 수업

Noh Sinyoung·2023년 4월 20일
0

CSS 선택자

parent 안의 모든 h1 선택

	<div class="parent">
        <h1 class="son">자식1</h1>
        <h1>자식2</h1>
        <h1>자식3</h1>
        <div>
            <h1>손자1</h1>
            <h1>손자2</h1>
        </div>
    </div>
<style>
	.parent h1 { color : red; }
</style>

parent 안의 모든 자식 h1 선택

<style>
	.parent > h1 { color : blue; }
</style>

son의 가장 가까운 형제 h1 선택

<style>
	.son + h1 { color : aqua; }
</style>

son의 모든 형제 h1 선택

<style>
	.son ~ h1 { color : black; }
</style>

가상클래스

마우스 올렸을때 적용

<style>
	.son:hover { background-color: rgb(114, 207, 238); }
</style>

마우스 클릭했을때 적용

<style>
	.son:active { background-color: rgb(59, 141, 169); }
</style>

0개의 댓글