728x90
동작 가상 클래스
- :link : 아직 방문하지 않은 링크에 스타일 적용
- :visited : 방문한 링크에 스타일 적용. 기본값이 보라색
- :hover : 사용자가 마우스 커서를 요소 위에 올렸을 때 스타일 적용
- :active : 사용자가 마우스로 요소를 클릭했을 때 스타일 적용
- :focus : 요소에 초점이 맞춰졌을 때 스타일 적용
- 활용 코드
/* a 태그에 마우스가 올라올 때 */
a:hover {
color: white;
background-color: blue;
}
/* 방문한 적이 없는 링크 */
a:link {
color: blue;
}
/* 방문한 적이 있는 링크 */
a:visited {
color: green;
}
/* 마우스가 포커스 됐을 때 */
input:focus {
border: 5px solid red;
}
상태 가상 클래스
- :target : 문서 내부 링크의 대상에 스타일 적용
- :not : 특정 요소를 제외하고 스타일 적용
- :enabled : 해당 요소가 사용할 수 있는 상태일 때의 스타일 지정
- :disabled : 해당 요소가 사용할 수 없는 상태일 때의 스타일 지정
- :checked : 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정
구조 가상 클래스
- :root : 문서 전체에 적용
- :first-child : 부모 안의 모든 요소 중 첫 번째 자식 요소 선택
- :last-child : 부모 안의 모든 요소 중 마지막 자식 요소 선택
- :nth-chlid(n) : 부모 안의 모든 요소 중에서 n번째 자식 요소 선택. n에 even, odd, 2n, 2n+1, an+b 등 수식 대입 가능
- :nth-last-chlid(n) : 부모 안의 모든 요소 중에서 끝에서 n번째 자식 요소 선택
- A:nth-of-type(n) : 부모 안에 있는 A 요소 중에서 n번째 요소 선택
- A:nth-last-of-type(n) : 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소 선택
- 활용 코드
/* 2n, even: 짝수행 */
/* 2n+1, odd: 홀수행 */
tbody > tr:nth-child(odd) {
background-color: greenyellow;
}
가상 요소
- ::first-line : 지정한 요소의 첫 번째 줄에 스타일 적용
- ::first-letter : 지정한 요소의 첫 번째 글자에 스타일 적용. 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다.
- ::before : 지정한 요소의 내용 앞에 스타일 적용
- ::after : 지정한 요소의 내용 뒤에 스타일 적용
- 활용 코드
<style>
li.new::after {
content: "New!!";
font-size: x-small;
padding: 2px 4px;
margin: 0 10px;
border-radius: 2px;
background: #f00;
color: #fff;
}
</style>
<body>
<div>
<h1>제품 목록</h1>
<ul>
<li class="new">제품 A</li>
<li>제품 B</li>
<li class="new">제품 C</li>
</ul>
</div>
</body>
- 실행 결과
제품 목록
- 제품 A
- 제품 B
- 제품 C
728x90
'Frontend > CSS' 카테고리의 다른 글
| 16. 미디어 쿼리 (0) | 2024.07.06 |
|---|---|
| 15. Overflow (0) | 2024.07.06 |
| 13. 속성 선택자 (0) | 2024.07.05 |
| 12. 연결 선택자 (0) | 2024.07.05 |
| 11. background (0) | 2024.07.05 |