CSS Attr Selectors

지정된 속성들로 HTML 요소들 꾸미기

요소가 갖고 있는 지정된 속성, 속성 값으로 꾸밀 수 있다.

CSS [attr] Selector

지정된 속성으로 요소를 선택하기 위해 쓰인다.

모든 a태그 중 target 속성있는 것들의 배경을 노랑으로 만든다.

a[target] {
    background-color: yellow;
}

CSS [attr="value"] Selector

지정된 속성과 값으로 요소를 선택한다.

a 태그의 target 속성의 값이 _blank인 것 선택

a[target="_blank"] { 
    background-color: yellow;
}

CSS [attr~="value"] Selector

지정된 단어를 포함하는 속성의 값으로 요소를 선택한다.

속성이 title인 것의 값이 flower인 것을 선택한다. 띄어쓰기로 구분됨. fflower같은 경우 안됨

[title~="flower"] {
    border: 5px solid yellow;
}

CSS [attr|="value] Selector

지정된 속성에서 지정된 값으로 시작하는 요소 선택

top, top-과 같은 것 선택 top1같은 경우 안됨

CSS [attr^="value"] Selector

속성의 값이 지정된 값으로 시작하는 요소 선택

[class^="top"] {
    background: yellow;
}

CSS [attr$="value"] Selector

속성의 값이 지정된 값으로 끝나는 요소 선택

a_test, -test, atest 됨

[class$="test"] {
    background: yellow;
}

CSS [attr*="value"] Selector

지정된 값을 포함하는 속성 선택

[class*="te"] {
    background: yellow;
}

class나 id 없이 속성과 속성값을 이용해서 선택할 수 있다.

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

https://www.w3schools.com/css/css_attribute_selectors.asp