[CSS/CSS3] 가상 선택자 사용하기

■ 가상 선택자를 사용하는 방법을 보여준다.

▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:hover
            {
                background-color : #ffff00;
            }
            a:visited
            {
                color : #00ffff;
            }
            p:first-line
            {
                font : 20pt Arial;
            }
            #paragraph1:first-line
            {
                color : blue;
            }
            #paragraph2:active
            {
                background-color : #dddddd;
                font-size        : 150%;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 가상 선택자</h1>
        </header>
        <div class="selectortest">
            <ul>
                <li><a href="#test1">test1</a></li>
                <li><a href="#test2">test2</a></li>
            </ul>
            <p id="paragraph1">
                pseudo class select에 대해 테스트를 하고 있습니다.<br />
                :first-line 선택자를 이용하면 문단의 첫번째 문장을 선택할 수 있습니다.
            </p>
            <p id="paragraph2">
                이곳을 클릭하면 배경색상과 폰트가 변경됩니다.
            </p>
            <input type="text"></input>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

input:hover

{

background-color : #ffff00;

}

a:visited

{

color : #00ffff;

}

p:first-line

{

font : 20pt Arial;

}

#paragraph1:first-line

{

color : blue;

}

#paragraph2:active

{

background-color : #dddddd;

font-size : 150%;

}

</style>

</head>

<body>

</header>

<ul>

</ul>

pseudo class select에 대해 테스트를 하고 있습니다.<br />

:first-line 선택자를 이용하면 문단의 첫번째 문장을 선택할 수 있습니다.

</p>

이곳을 클릭하면 배경색상과 폰트가 변경됩니다.

</p>

</div>

</body>

</html>