가상 클래스 셀렉터
요소의 특정 상태에 따라 스타일을 정의할때 사용
1-1. 링크 셀렉터
| link | 방문하지 않은 링크일 때 |
| visited | 방문한 링크일 때 |
| hover | 마우스가 올라와 있을 때 |
| active | 클릭된 상태일 때 |
| focus | 포커스가 들어와 있을 때 |
<!DOCTYPE html>
<style>
company a:link{color: blue;}
company a:visited{color: red;}
company a:hover{color: yellow;}
company a:active{color:blueviolet;}
company a:focus{color:aqua;}
</style>
<body>
<company><a href="https://www.google.com/">링크</a></company>
</body>
1-2.UI 요소 상태 셀렉터
| :checked | 체크 상태 |
| :enabled | 사용 가능한 상태 |
| :disabled | 사용 불가능한 상태 |
<!DOCTYPE html>
<style>
input:enabled + span{color: blue;}
input:checked + span{color: violet;}
input:disabled + span{color: red;}
</style>
<body>
<input type="radio" checked="checked" name="gender"><span>1번</span><br>
<input type="radio" name="gender"><span>2번</span><br>
<input type="radio" disabled name="gender"><span>3번</span><br>
</body>2번
3번
1-3 구조 가상 클래스 셀렉터
| :first-child | 모든 요소 중 첫번째 자식인 요소를 선택 |
| :last-child | 모든 요소 중 마지막 자식인 요소를 선택 |
| :nth-child(n) | 모든 요소 중 앞에서 n번째 자식인 요소를 선택 |
| :nth-last-child(n) | 모든 요소 중 뒤에서 n번째 자식인 요소를 선택 |
<!DOCTYPE html>
<style>
what a:first-child{color: red;}
what a:last-child{color: blue;}
what a:nth-child(3){color: aquamarine;}
what a:nth-last-child(2){color:blueviolet;}
</style>
<body>
<what>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
</what>
</body>
| :first-of-type | 선택한 요소의 부모 안에서 첫 번째로 나타나는 해당 타입의 자식을 선택합니다. |
| :last-of-type | 선택한 요소의 부모 안에서 마지막으로 나타나는 해당 타입의 자식을 선택합니다. |
| :nth-of-type(n) | 선택한 요소의 부모 안에서 앞에서부터 n번째에 나타나는 해당 타입의 자식을 선택합니다. |
| :nth-last-of-type(n) | 선택한 요소의 부모 안에서 뒤에서부터 n번째에 나타나는 해당 타입의 자식을 선택합니다. |
<!DOCTYPE html>
<style>
how p:first-of-type { color: red; }
how p:last-of-type { color: blue; }
how p:nth-of-type(2) { color: green; }
how p:nth-last-of-type(2) { color: orange;}
</style>
<body>
<how>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</how>
</body>
1-4.부정 셀렉터
<!DOCTYPE html>
<style>
nono p:not([class="no"]){color: blue;}
</style>
<body>
<nono>
<p class="no">노</p>
<p >예스예스</p>
</nono>
</body>
'FrontEnd > css' 카테고리의 다른 글
| [CSS] 크기단위 (0) | 2024.06.05 |
|---|---|
| [CSS] 셀렉터(Selector) (1) | 2024.06.04 |
| [CSS] 기본문법 (0) | 2024.06.04 |
