CSS (동적 가상 && 속성)선택자

button 동적 가상 생성자 속성 선택자

button

• 사용자가 클릭할수 있는 요소입니다.
• form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있습니다.

<button>button</button>
/* disabled: 누르거나 클릭하는 것을 막습니다. */
<button disabled>button</button>

동적 가상 선택자

:active

• 클릭시 활성화(누르고 있는 동안)

:visited

• 사용자가 이미 방문한 링크일 경우 해당 상태에 만족합니다
• 웹브라우저의 방문기록 정보를 사용합니다.

a:visited {
            color: skyblue;
        }

:disabled

• 비활성화 된 요소를 선택합니다

:hover

• 마우스 커서를 요소에 올려두었을 때

button:hover {
            background: skyblue;
}

:focus

• focus 받은 상태를 나타냅니다

.btn:focus {
            background: gold;
        }

 

:checked

• input이 선택된 상태를 나타냅니다(checkbox radio 등 )

속성선택자

속성 선택자(attribute selectors)

속성 선택자를 사용하면 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있습니다.

• [속성이름] 선택자
• [속성이름="속성값"] 선택자

[속성이름]

• 해당 속성을 가진 요소 모두 선택

[class] {
            text-decoration: **underline**;
        }

<div>1</div>
<div class="box">2</div>
<div>3</div>

[속성이름~="속성값"] 선택자

• 특정 문자열로 이루어진 단어를 포함하는 요소를 모두 선택

[class ~="box"] {
            text-decoration: underline;
        }

<div>1</div>
<div class="box">2</div>
<div>3</div>

[속성이름|="속성값"] 선택자

• 특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 하이픈 - 기호가 있는 태그

[class |="box"] {
            text-decoration: underline;
        }

/* not working */
<div class="box deco">1</div>
/* working */
<div class="box-deco">2</div>
<div>3</div>

[속성이름^="속성값"] 선택자

• 특정 문자열로 시작하는 요소를 모두 선택

[속성이름$="속성값"] 선택자

• 특정 문자열로 끝나는 요소를 모두 선택

[class $="box"] {
            text-decoration: underline;
        }

<div class="box deco">1</div>
<div class="box-deco">2</div>
<div class="deco-box">3</div>

[속성이름*="속성값"] 선택자

• 특정 문자열를 포함하는 요소를 모두 선택합니다.

 

 

 

http://www.tcpschool.com/css/css_selector_attribute

코딩교육 티씨피스쿨

출처 멋쟁이 사자처럼 위니브