– 가상클래스(Pseudo-Class)는,별도의 class를 지정하지 않아도 지정한 것 처럼요소를 선택할 수 있다.
– 가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며,존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능하다.
예제
<ul>
<li>안녕하세요</li>
<li>반갑습니다</li>
<li>안녕히계세요</li>
</ul>
ul li:first-child{fond-weight:bold}
ul li:not(:first-child){display:none}**안녕하세요** // 2,3번째 li태그는 보이지 않는다.| 요소 | 설명 |
|---|---|
| ::first-line | 요소의 텍스트에서 척 줄에 스타일을 적용한다 |
| ::first-letter | 요소의 첫 번째 글자에 스타일을 적용한다 |
| ::first-child | 첫번째 요소에 스타일을 적용한다 |
| ::before | 요소의 콘텐츠 시작부분에 생성된 콘텐츠를 추가한다 IE8부터적용가능 |
| ::after | 요소의 콘텐츠 끝부분에 생성된 콘텐츠를 추가한다 IE8부터적용가능 |
| ::selection | 요소의 텍스트에서 사용자의 의하여 선택(드래그)된 영역의 속성을 변경한다 |
| ::placeholder | Input 필드에 힌트 텍스트에 스타일을 적용한다 |
예제1
<head>
<style>
.topnav a:not(:first-child), {
display: none;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a> // 첫번째 요소가 아니므로 display:none이 적용됨
</div>
</body>예제2
<head>
<style>
p::before {
content: "Read this -";
font-weight: bold;
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>
</body>Read this-My name is Donald
Read this-I live in Ducksburg
Read this-Note: For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).
내가 볼려고 만든 블로그