[html5] 강좌 htm5 기본 css 선택자

[html5] 강좌 htm5 기본 css 선택자

 

* 기본 속성 선택자

<style>

    input[type=text] { background: red; }

    input[type=password] { background: blue; }

</style>

 

* 문자열 속성 선택자

<style>

    img[src$=png] { border: 3px solid red; }

    img[src$=jpg] { border: 3px solid green; }

</style>

 

div 태그를 기준으로 한단계 아래 태그를 자손

* 후손 선택자

<style>

    #headr h1 { color: red; } 

</style>

 

div 태그를 기준으로 한단계 아래의 모든 태그를 후손

* 자손 선택자

<style>

    #headr > h1 { color: red; }

</style>

 

* 동위 선택자

<style>

    h1 + h2 { color: red; }

    h1 ~ h2 { background-color: orange; }

</style>

 

* 반응 선택자

<style>

    h1:hover { color: red; }

    h1:active { color: orange; }

</style>

 

* 상태 선택자

:checked

:focus

:enabled

:disabled

 

* 구조 선택자

:first-child : 첫번째 위치하는 자손을 선택합니다.

:last-child : 마지막에 위치하는 자손을 선택합니다.

:nth-child(수열) : 앞에서 수열 번째에 있는 자손을 선택합니다.

:nth-last-child(수열) : 뒤에서 수열 번째에 있는 자손을 선택합니다.

 

* 형태 구조 선택자

:first-of-type : 형제 관계 중에서 첫번쨰로 등장하는 특정 태그를 선택

:last-of-type :

:nth-of-type(수열) :

:nth-last-of-type(수열) :

 

* 문자 선택자

::first-letter : 첫 번째 글자를 선택합니다.

::first-line : 첫 번째 줄을 선택 합니다. 

 

* 전후 문자 선택자

::after : 태그 뒤에 위치하는 공간을 선택합니다.

::before : 태그 앞에 위치하는 공간을 선택합니다.

<style>

    p { counter-increment: rint; }

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

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

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

</style>

 

* 반응 문자 선택자

::sellection : 사용자가 드래그한 글자를 선택합니다.

 

* 링크 선택자

:link : href 속성을 가지고 있는 a 태그를 선택합니다.

:visited : 방문했던 링크를 가지고 있는 a 태그를 선택합니다.

 

* 부정 선택자

:not(선택자)

 

[html5] 강좌 htm5 기본 css 선택자