[attr]
html
의 속성( attribute )을 가지고 선택하는 개념
( css 속성은 property )
class
를 부여하지 않아도 된다는 장점이 있음!![attr]
특정한 속성을 포함한 요소를 선택
마지막 input
영역의 투명도를 조절하고 싶다면..?
html
<input type="text" value="banana">
<input type="password" value="1234">
<input type="text" value="disabled text" disabled>
css
[disabled] {
opacity: 0.5;
}
[attr=value]
속성 값이 value
인 요소 선택
두 번째 input
영역의 투명도를 조절하고 싶다면..?
html
<input type="text" value="banana">
<input type="password" value="1234">
<input type="text" value="disabled text" disabled>
css
[type="password"] {
opacity: 0.5;
}
[attr^=value]
value
로 시작하는 요소 선택html
<button class="btn-spring">spring</button>
<button class="btn-summer">summer</button>
<button>autumn</button>
css
[class^="btn-"] {
font-weight: bold;
border-radius: 5px;
}
[attr$=value]
value
로 끝나는 요소 선택html
<button class="btn-spring">spring</button>
<button class="btn-summer">summer</button>
<button>autumn</button>
css
[class$="spring"] {
color: green;
}
[class$="summer"] {
color: blue;
}