CSS - 속성 선택자(Attribute Selectors)

속성 선택자(Attribute Selectors)

• HTML 속성을 이용

• 대괄호([]) 사용

 

ATTR

• 속성 attr을 포함한 요소 선택

[disabled] {
    opacity : 0.2;  /* 20% */
    color : red;
}

<input type=“text” value=“DHLEE”>
<input type=“password” value="1234">
<input type=“text” value="disabled text" disabled>

 

 

ATTR=VALUE

• 속성 attr 을 포함하며 속성 값이 value 인 요소 선택

• value 인 요소에 쌍따옴표 생략 가능

<!— value에 쌍따옴표 생략 가능 —>
[type=“password"] {
    opacity : 0.5;
    color : red;
}

<input type=“text” value=“DHLEE”>
<input type=“password” value="1234">
<input type=“text” value="disabled text" disabled>

 

 

ATTR^=VALUE

• 속성 attr 을 포함하여 속성 값이 value 로 시작하는 요소 선택

[class^=“btn-"] {
    font-weight : bold;
    boder-radius : 20px;
}

<button class=“ban-success">SUCCESS</button>
<button class=“ban-danger">DANGER</button>
<button>NORMAL</button>

 

 

ATTR$=VALUE

• 속성 attr 을 포함하며 속성 값이 value 로 끝나는 요소 선택

[class^=“btn-"] {
    font-weight : bold;
    boder-radius : 20px;
}
[class$=“success"] {
    color : green;
}
[class$=“danger"] {
    color : red;
}

<button class=“ban-success">SUCCESS</button>
<button class=“ban-danger">DANGER</button>
<button>NORMAL</button>

 

 

 

출처 : heropy.org