'WebFont-end/CSS3'에 해당되는 글 1건

  1. [CSS3] CSS 선택자

[CSS3] CSS 선택자


CSS 선택자




 선택자 종류

 선택자 형태

 선택자 예

 전체 선택자

 *

 태그 선택자

태그 

h1 

 아이디 선택자

#id 

#header 

 클래스 선택자

 .class

 .item

 후손 선택자

 선택자 선택자

 header h1

 자식 선택자

 선택자 > 선택자

 header > h1

 속성 선택자

 선택자[속성=값]

 input[type=text]

 선택자[속성~=값]

 div[data-role~=row]

 선택자[속성|=값]

 div[data-role|=row]

 선택자[속성^=값]

 div[data-role^=row]

 선택자[속성$=값]

 div[data-role$=row]

 선택자[속성*=값]

 div[data-role*=row]

 동위 선택자

 선택자 +선택자

 h1+div

 선택자 ~ 선택자

 h1 ~ div

 구조 선택자

 선택자:first-child

 li:first-child

 선택자:last-child

 li:last-child

 선택자:nth-child(수열)

 li:nth-child(2n+1)

 선택자:nth-last-child(수열)

 li:nth-last-child(2n+1)

 선택자:first-of-type

 h1:first-of-type

 선택자:last-of-type

 h1:last-of-type

 선택자:nth-of-type(수열)

 h1:nth-of-type(2n+1)

 선택자:nth-last-of-type(수열)

 h1:nth-last-of-type(2n+1)

 반응 선택자

 선택자:active

 div:active

 선택자:hover

 div:hover

 상태 선택자

 :checked

 input:checked

 :focus

 input:focus

 :enabled

 input:enabled

 :disabled

 input:disabled

 링크 선택자

 :link

 a:link

 :visited

 a:visited

 문자 선택자

 ::first-letter

 p::first-letter

 ::first-line

 p::first-line

 ::after

 p::after

 ::before

 p::before

 ::selection

 p::selection

 부정 선택자

 선택자:not(선택자)

 li:not(.item)


1. 후손 선택자 예제

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* id 속성으로 header를 가지는 태그의

           후손 위치에 있는 h1 태그의

           color 속성을 red 키워드로 적용합니다.*/

        #header h1  { color: red; }

        

         /* id 속성으로 section을 가지는 태그의

            후손 위치에 있는 h1 태그의

            color 속성을 orange 키워드로 적용합니다.*/

        #section h1 { color: orange; }

    </style>

</head>

<body>

    <div id="header">

        <h1 class="title">Lorem ipsum</h1>

        <div id="nav">

            <h1>Navigation</h1>

        </div>

    </div>

    <div id="section">

        <h1 class="title">Lorem ipsum</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    </div>

</body>

</html>

※ 후손 선택자 주의사항

#header h1, h2  { color: red; }

--> id 속성이 header인 태그의 후손 위치에 있는 h1 태그와 h2 태그의 color 속성을 red로 적용한다.


#header h1, #header h2  { color: red; }

--> id 속성이 header인 태그의 후손 위치에 있는 h1 태그와 id 속성이 header인 태그의 후손 위치에 있는 h2 태그의 color 속성을 red로 적용한다.


2. 자식 선택자 예제
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* id 속성으로 section을 가지는 태그의
           자식 위치에 있는 h1 태그의
           color 속성을 orange 키워드로 적용합니다.*/
        #header > h1  { color: red; }
        
        /* id 속성으로 section을 가지는 태그의
           자식 위치에 있는 h1 태그의
           color 속성을 orange 키워드로 적용합니다.*/
        #section > h1 { color: orange; }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
        </div>
    </div>
    <div id="section">
        <h1 class="title">Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</body>
</html>


3. 동위 선택자 예제

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* h1 태그의 바로 뒤에 위치하는 h2 태그의

           color 속성에 red 키워드를 적용합니다. h1 바로 뒤의 태그 1개만*/

        h1 + h2 { color: red; }

        

        /* h1 태그의 뒤에 위치하는 h2 태그의

           background-color 속성에 orange 키워드를 적용합니다. h1 뒤의 모든 h2태그*/

        h1 ~ h2 { background-color: orange; }

    </style>

</head>

<body>

    <h1>Header - 1</h1>

    <h2>Header - 2</h2>

    <h2>Header - 2</h2>

    <h2>Header - 2</h2>

    <h2>Header - 2</h2>

</body>

</html>


4. 반응 선택자 예제

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* h1 태그에 마우스를 올릴 경우에

           color 속성에 red 키워드를 적용합니다. */

        h1:hover { color: red; }

        

        /* h1 태그를 마우스로 클릭할 때에

           color 속성에 blue 키워드를 적용합니다. */

        h1:active { color: blue; }

    </style>

</head>

<body>

    <h1>User Action Selector</h1>

</body>

</html>


5. 상태 선택자 예제

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* input 태그가 사용 가능할 경우에

           background-color 속성에 white 키워드를 적용합니다. */

        input:enabled { background-color: white; }


        /* input 태그가 사용 불가능할 경우에

           background-color 속성에 white 키워드를 적용합니다. */

        input:disabled { background-color: gray; }


        /* input 태그에 체크박스나 라디오 버튼에 체크되었을 경우에

           background-color 속성에 white 키워드를 적용합니다. */

        input:checked { background-color: orange; }


        /* input 태그에 초점이 맞추어진 경우에

           background-color 속성에 white 키워드를 적용합니다. */

        input:focus { background-color: orange; }

    </style>

</head>

<body>

    <h2>Enabled</h2>

    <input />

    <h2>Disabled</h2>

    <input disabled="disabled"/>

</body>

</html>


cf.) 상태 선택자와 동위 선택자의 복합 활용

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* input 태그의 type 속성이 checkbox인 태그가 체크되었을 때,

            바로 뒤에 위치하는 div 태그의 height 속성을 0픽셀로 적용합니다. */

        input[type=checkbox]:checked + div {

            height: 0px;

        }


        div {

            overflow: hidden;

            width: 650px; height: 300px;


            /* 변환 효과를 적용합니다. */

            -ms-transition-duration: 1s;

            -webkit-transition-duration: 1s;

            -moz-transition-duration: 1s;

            -o-transition-duration: 1s;

            transition-duration: 1s;

        }

    </style>

</head>

<body>

    <input type="checkbox" />

    <div>

        <h1>Lorem ipsum</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    </div>

</body>

</html>


6. 문자 선택자

(1) 시작 문자 선택자

1) ::first-letter: 첫 번째 글자를 선택한다.

2) ::first-line: 첫 번째 줄을 선택한다.

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic Page</title>

    <style>

        p::first-letter { font-size: 3em; }

        p::first-line { color: red; }

    </style>

</head>

<body>

    <h1>Lorem ipsum dolor sit amet</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <p>Aenean ac erat et massa vehicula laoreet consequat et sem.</p>

</body>

</html>



(2)  전후 문자 선택자

1) ::after: 태그 뒤에 위치하는 공간을 선택한다.

2) ::before: 태그 앞에 위치하는 공간을 선택한다.

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic Page</title>

    <style>

        p { counter-increment: rint; }

        p::before { content: counter(rint) "."; }

        p::after { content: " - " attr(data-page) " page"; }

        p::first-letter { font-size: 3em; }

    </style>

</head>

<body>

    <h1>Lorem ipsum dolor sit amet</h1>

    <p data-page="52">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <p data-page="273">Aenean ac erat et massa vehicula laoreet consequat et sem.</p>

</body>

</html>


7. 링크 선택자 예제

(1) :link: href 속성을 가지고 있는 a 태그를 선택한다.(사용자가 아직 방문하지 않은 링크레 스타일을 적용한다.)
(2) :visited: 방문했던 링크를 가지고 있는 a 태그를 선택한다.(기본 자주색)
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
       /* 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다.*/
        a { text-decoration: none; }
        a:visited { color: red; }

        /* href 속성을 가지고 있는 a 태그의 뒤의 공간에 
           "- (href 속성)"을 추가합니다. */
        a:link::after { content: ' - ' attr(href); }
    </style>
</head>
<body>
    <h1><a>Nothing</a></h1>
    <h1><a href="http://hanb.co.kr">Hanbit Media</a></h1>
    <h1><a href="http://www.w3.org/">W3C</a></h1>
    <h1><a href="https://github.com/">Github</a></h1>
</body>
</html>


'WebFont-end > CSS3' 카테고리의 다른 글

[CSS3] CSS 선택자  (0) 2014.12.21