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

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

▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:nth-of-type(2)
            {
                margin : 10px;
                border : 2px solid red;
            }
            p:nth-child(odd)
            {
                background-color : #aaaaaa;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 구조적 가상 선택자</h1>
        </header>
        <div class="selectortest">
            성명 : <input id="name" type="text" /><br />
            아이디 : <input id="id" type="text" /><br />
            전화번호 : <input id="phone" type="text" /><br />
        </div>
        <p>구조적 가상 클래스 선택자는 다양한 방식으로 구조화된 페이지에서 특정 요소를 선택할 수 있다.</p>
        <p>이 중 :nth-of-type(n)는 동일 유형 중 n번째 요소를 선택하는 의미이다.</p>
        <p>2n, 2n+1과 같이 수식으로 짝홀수를 선택하도록 할 수 있다.</p>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

input:nth-of-type(2)

{

margin : 10px;

border : 2px solid red;

}

p:nth-child(odd)

{

background-color : #aaaaaa;

}

</style>

</head>

<body>

</header>

성명 : <input id="name" type="text" /><br />

아이디 : <input id="id" type="text" /><br />

전화번호 : <input id="phone" type="text" /><br />

</div>

<p>구조적 가상 클래스 선택자는 다양한 방식으로 구조화된 페이지에서 특정 요소를 선택할 수 있다.</p>

<p>2n, 2n+1과 같이 수식으로 짝홀수를 선택하도록 할 수 있다.</p>

</body>

</html>