| 유형 | 셀렉터 | 설명 |
| 마우스 | :hover | 마우스가 올라갈 때 스타일 적용 |
| :active | 마우스로 누르고 있는 상황에서 스타일 적용 | |
| 폼 요소 | :focus | 폼 요소가 키보드나 마우스 클릭으로 포커스를 받을 때 스타일 적용 |
| 링크 | :link | 방문하지 않은 링크에 스타일 적용 |
| :visited | 방문한 링크에 스타일 적용 | |
| 블록 | :first-letter | <p>, <div> 등과 같은 블록형 태그의 첫 글자에 스타일 적용 <span>과 같은 인라인 태그에는 적용되지 않음. |
| :first-line | <p>, <div> 등과 같은 블록형 태그의 첫 라인에 스타일 적용 | |
| 구조 | :nth-child(even) | 짝수 번째 모든 자식 태그에 스타일 적용 |
| :nth-child(1) | 첫 번째 자식 태그에 스타일 적용 |
[ 코드 ]
<!DOCTYPE html>
<head>
<title>셀렉터 만들기</title>
<style>
body.main { background-color : mistyrose; }
#list { background-color : aliceblue; }
#list span { font-size : 25px; color : blue; }
#list strong { background : orange; }
#english { background : gray; }
.author { color : red; font-size : 30px; }
</style>
</head>
<body class="main">
<h3><mark>셀렉터 만들기</h3></mark><hr/>
<div>
<div>
<ul id="list">
<li><span>아무 하는 일 없이 시간을 허비하지 않겠다고 맹세하라.</span></li><br/>
<li><strong>우리가 항상 뭔가를 한다면 놀라우리만치 많은 일을 해낼 수 있다.</strong></li><br/>
<li id="english">"Determine never to be idle...</li><br/>
<li id="english">It is wonderful how much may be done if we are always doing."</li><br/>
</ul>
</div>
</div>
<p class="author">- 토마스 제퍼슨 -</p>
</body>
</html>
[ 실행 화면 ]
'Web > CSS' 카테고리의 다른 글
| CSS(5) 표 꾸미기 (0) | 2020.11.04 |
|---|---|
| CSS(4) <div>의 박스 모델 (0) | 2020.11.04 |
| CSS(3) 색과 텍스트 꾸미기 (0) | 2020.11.04 |
| CSS(1) <style> 스타일 시트 만들기 (0) | 2020.11.04 |
댓글