https://coding-diary100.tistory.com/45
CSS_ 기본 개념과 문법
CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다
coding-diary100.tistory.com
가상 선택자
- 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택
li: first-child
li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용
ex) ul>li:first-child {color:deeppink;}
li:last-child
li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용
li:nth-child(n)
li 요소 중에서 n번째 해당하는 요소의 스타일을 적용
li:nth-child(odd)
li 요소 중에서 홀수번째 해당하는 요소의 스타일을 적용
li:nth-child(even)
li 요소 중에서 짝수번째 해당하는 요소의 스타일을 적용
코드
<!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){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>
<p><a href="http://python.org">파이썬 공식 홈페이지</a></p>
</body>
</html>
결과
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_텍스트 문법 (1) | 2023.03.30 |
|---|---|
| CSS_컬러 문법 (0) | 2023.03.30 |
| CSS_속성 선택자 (2) | 2023.03.28 |
| CSS_자식,자손,형제 선택자 (0) | 2023.03.28 |
| CSS_class 선택자 (0) | 2023.03.28 |
