CSS Selector
UI element states pseudo-classes
- checked
- enabled
- disabled
<style>
input:checked { //input 태그가 선택된 상태일 때
color: red;
}
input:enabled { //input 태그가 사용 불가능일 때
color: gray;
}
input:disabled { //input 태그가 사용 가능일 때
color: orange;
}
</style>
<input type='radio'></input>
<input type='checkbox'></input>Structural pseudo-classes
- first-child
- last-child
<style>
p:first-child { //첫번째 자식인 p 태그들을 선택
color: red; //<p>hi</p>, <p>bye</p>
}
p:last-child { //마지막 자식인 p 태그들을 선택
color: blue; //<p>good night</p>
} //<p>hello</p>는 span이 껴있어서 마지막 자식이 아니다.
</style>
<body>
<div>
<p>hi</p>
<p>hello</p>
<span>sorry</span>
</div>
<div>
<p>bye</p>
<p>good bye</p>
<p>good night</p>
</div>
</body>