속성 선택자(Attribute Selectors) - [attr^=value], [attr$=value]

1. atter^=value

속성 class을 포함하며 속성 값이 btn-로 시작하는 요소 선택

[class^="btn-"] { /*btn-으로 시작하는 모든 클래스 선택*/
    font-weight : bold;
    border-radius : 20px;
}

<button class = "btn-success">Success</button>
<button class = "btn-danger">Danger</button>
<button>Normal</button>

위의 CSS에서는 캐롯("^")을 사용해서 btn-으로 시작 하는 모든 클래스를 선택하게 만들었다.

 

2. attr$=value

속성 class을 포함하며 속성값이 sucees 또는 danger로 끝나는 요소 선택

[class$="sucess"]{
    color : green;
}

[class$="danger"]{
    color : red;
}

<button class = "btn-success">Success</button>
<button class = "btn-danger">Danger</button>
<button>Normal</button>