HTML, CSS
(29)CSS_가상선택자
빠스무
2023. 3. 29. 18:06
728x90
- CSS 가상선택자
- 사용하는 태그에 관한 문법 설명은 아래 링크로 가서 확인 가능하다.
- https://jm-rograming.tistory.com/54
(15)CSS_기본 문법
CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 ✔ 참고 MDN: https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information a
jm-rograming.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상 선택자</title>
<style>
.list > li:first-child {color: deeppink;}
.list > li:nth-child(2) {color: gold;}
.list > li:nth-child(odd) {background-color: greenyellow;}
.list > li:nth-child(even) {background-color: black;}
.list > li:last-child{color: white;}
a:link{ color:greenyellow;text-decoration: none; }
a:visited{color: deepskyblue; text-decoration: none;}
a:hover{text-decoration: underline;}
a:active{color: red; text-decoration: underline;}
</style>
</head>
<body>
<h2>가상 선택자와 링크 스타일링</h2>
<ul class="list">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
</ul>
</body>
</html>
