CSS - 속성 선택자(Attribute Selectors)
2019. 12. 11. 13:06ㆍ웹/CSS
속성 선택자(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
'웹 > CSS' 카테고리의 다른 글
CSS - 상속(Inheritance) (0) | 2019.12.11 |
---|---|
CSS - 가상클래스 선택자 - NTH OF TYPE, NOT (0) | 2019.12.11 |
CSS - 가상 요소 선택자(Pseudo-Elements Selectors) (0) | 2019.12.11 |
CSS - 가상클래스 선택자 - first-child, last-child, nth-child (0) | 2019.12.11 |
CSS - 가상클래스 선택자(Pseudo-Classes Selectors) - hover, active, focus (0) | 2019.12.11 |