CSS - 속성 선택자 (attribute selector)

---

 

CSS 속성 선택자(attribute selector)

 

 

 * [속성이름] 

- 해당 속성을 가진 요소를 모두 선택한다. 

[title]{
	color: blue;
}

 

 

 

 * [속성이름~="속성값"] 선택자 

- 특정 문자열로 이루어진 단어를 포함하는 요소를 모두 선택한다.

[class~="btn"]{
	text-decoration:underline;
}

class="btn" /* 선택됨 */
class="btn reset" /* 선택됨 */
class="reset btn" /* 선택됨 */
class="btn-negative"
class="btn-positive"

 

 

 

 * [속성이름|="속성값"] 선택자 

- 특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 뒤에 하이픈(-) 기호가 있는 태그를 선택한다. 

[class|="btn"]{
	text-decoration:underline;
}

class="btn" /* 선택됨 */
class="btn reset"
class="reset btn"
class="btn-negative" /* 선택됨 */
class="btn-positive" /* 선택됨 */

 

 

 

 * [속성이름^="속성값"] 선택자 

- 특정 문자열로 시작하는 요소를 모두 선택한다. 

[class^="btn"]{
	width:100px;
	height:48px;
}

class="btn" /* 선택됨 */
class="btn reset" /* 선택됨 */
class="reset btn"
class="btn-negative" /* 선택됨 */
class="btn-positive" /* 선택됨 */

 

 

 

 * [속성이름$="속성값"] 선택자 

- 특정 문자열로 끝나는 요소를 모두 선택한다. 

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

class="btn-negative" /* 선택됨 */
class="btn-negative error"
class="error btn-negative" /* 선택됨 */
class="message-negative" /* 선택됨 */
class="message-negative-error"

 

 

 

 * [속성이름*="속성값"] 선택자 

- 특정 문자열을 포함하는 요소를 모두 선택한다. 

[class*="btn"]

class="btn-a" /* 선택됨 */
class="a-btn" /* 선택됨 */
class="eeebtneee" /* 선택됨 */

 

 

💭 꼭 다 외울 필요는 없다. 가볍게 공부하는 정도로만 해두자. 

 

 

---

 

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!