css 선택자란 (5.28)
https://notion6780.tistory.com/92
html/css) css 선택자 selector
⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히
notion6780.tistory.com
앞서 css선택자의 개념을 짚었다.
여기에 가상클래스 선택자의 사용법을 적어본다.
⭐가상클래스 선택자
요소의 특정상태나 위치 기준으로 스타일 정의
어떤 상황이나 조건에 있는 요소를 구분한다
문법
선택자 뒤에 콜론(:)을 붙인 뒤 다음과 같은 가상클래스를 붙인다.
✨ hover 마우스오버
✨ focus 입력창선택
✨ first-child 첫번째 자식요소
✨ las_child 마지막 자식요소
✨ nth-child(n) n번째 자식요소
예제)
다음 html 구문을 css로 꾸며보자
<body>
<button>버튼을 눌러보세요</button>
<input type="text" name="" id="" placeholder="여기에 값을 입력하시오" />
<ul class="item-list">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
<li>항목5</li>
</ul>
</body>
hover
button:hover {
background-color: chocolate;
}
focus
input:focus {
border: 2px solid chocolate;
color: orangered;
/* outline 속성을 제거해야
border 속성을 사용할 수 있다. */
outline: none;
}
frist-child
/* 리스트의 첫 번째 항목을 선택해서
배경색을 초록으로 */
.item-list li:first-child {
background-color: darkgreen;
width: 20vw;
}
last-child
/* 리스트의 마지막 항목을 선택해서
배경색을 노란색으로 */
.item-list li:last-child {
background-color: navy;
width: 20vw;
}
nth-child(n)
/* 리스트 홀수 항목 폰트20 굵게 */
.item-list li:nth-child(odd) {
font-size: 24px;
font-weight: bold;
}
'HTML CSS' 카테고리의 다른 글
| html/css) 박스모델이란 (0) | 2025.06.03 |
|---|---|
| html/css) css선택자 - 속성선택자 (0) | 2025.05.29 |
| html/css) css선택자 - 결합선택자 (0) | 2025.05.29 |
| html/css) css선택자 - 기본선택자 (0) | 2025.05.29 |
| html/css) css에서 사용하는 주요 단위 (0) | 2025.05.28 |