Developer Factory

[css] 의사(pseudo) 셀렉터(셀렉터의 상태) 본문

Developer/Css

[css] 의사(pseudo) 셀렉터(셀렉터의 상태)

Jeremy.Park 2014. 6. 16. 10:16
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 의사(pseudo) 셀렉터(셀렉터의 상태

문법) 대상:상태명
예)
a:visited - 한번 방문한 링크
a:hover - 링크에 마우스가 올라간 상태

-->
<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
<title> CSS004</title >
<style type="text/css" >
h1.c2:hover {
  background-color: black;
  color: white;
}

/* CSS 스타일 상속
- 일부 스타일은 자식 엘리먼트로 상속된다.
 */
div:nth-child(2) {
  border: 2px solid blue;
  color: red;
}
p::FIRST-LETTER {
       color: blue ;
       font-size: 50px ;
}
</style>
</head>
<body>
<div id="d1" >
       <div id="d11" >
             <h1 id="header01" class= "c1 c2">테스트1 </h1>
             <p class="c1 c2" >테스트...01</ p>
             <h1 id="header02" >테스트2</ h1>
             <p> 테스트...02</p >
       </div>
      
       <div id="d12" >
             <h1 id="header03" class= "c2">테스트3 </h1>
             <p class="c2" >테스트...03</ p>
             <h1 id="header04" >테스트4</ h1>
             <p> 테스트...04</p >
       </div>
</div>

<div id="d2" >
       <h1 id="header05" class= "c1">테스트5 </h1>
       <p class="c1" >테스트...05</ p>
       <h1 id="header06" >테스트6</ h1>
       <p> 테스트...06</p >
       <div id="d21" >
       <h1> 테스트7</h1 >
       <p> This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web. </p>
       </div>
</div>
</body>
</html>


저작자표시

'Developer > Css' 카테고리의 다른 글

[css] 박스 border  (0) 2014.06.16
[css] 폰트 다루기  (0) 2014.06.16
[css] 복잡한 선택 조건  (0) 2014.06.16
[css] CSS 다중 선택  (0) 2014.06.16
[css] CSS Selector  (0) 2014.06.16
'Developer/Css' Related Articles more