[CSS] CSS의 속성 선택자(Attribute Selectors)

CSS는 선택자(ex. h1, .class 등)를 잡아 HTML 요소에 스타일을 준다.

CSS가 선택자를 잡는 기준은 5가지로 나눌 수 있다.

 

1. Simple Selectors(요소의 name,id,class를 기준으로 선택 - 일반적인 방법)
2. Combinator Selectors(요소 간의 관계를 기준으로 선택)
3. Pseudo-class Selectors(요소의 특정 상태를 기준으로 선택)
4. Pseudo-elements Selectors(요소의 특정 부분을 선택)
5. Attribute Selectors(요소가 가진 속성이나 속성의 값으로 선택)

이번 글에서는 Attribute Selectors에 대해서 알아보겠습니다.

Attribute Selectors(요소가 가진 속성이나 속성의 값으로 선택)

속성 선택자는 특정 속성이나 속성의 값으로 요소를 선택하는 선택자이다.

표기법 - 기준 요소 뒤에 대괄호(' [ ] ')를 붙히고 대괄호 안에 Selectors 사용 ex. div[class="value"]{}

 

1) 특정 속성을 가진 요소 선택 ( 요소[attribute] {} )

/* class 속성을 가진 li 선택 */
li[class]{
    color:red;
}

2) 특정 속성과 특정 속성값을 가진 요소 선택 ( 요소[attribute="value"]{} )

/* class와 class의 값으로 "test"를 갖는 li선택 */
li[class="test"]{
    color:red;
}

3) 특정 속성과 특정 속성값을 포함하는 요소 선택 ( 요소[attribute~="value"]{} )

/* class속성과 class명에 "test"가 포함된 li 선택 */
li[class~="test"] {
    color:red;
}

+

두단어가 공백으로 나눠져 있거나 "test"라는 값이 온전히 포함되어야한다.

ex)) "test" (o) , "test case" (o) , "test-case" (x)

 

4) 특정 속성과 특정 속성값을 포함하는 요소 선택 ( 요소[attribute*="value"]{} )

/* class속성과 class명에 "test"가 포함된 li 선택 */
li[class*="test"] {
    color:red;
}

+

"test"라는 값이 온전히 포함될 필요는 없다 한단어 안에 "test"라는 글이 포함되 있어도 됨.

ex)) "test" (o) , "casetesta" (o), "case-test" (o), "test-case" (o)

 

5) 특정 속성과 특정 속성값으로 시작하는 요소 선택 ( 요소[attribute|="value"]{} )

/* class 속성을 가지고 class명이 "test"로 시작하는 li선택 */
li[class|="test"]{
    color:red;
}

+

"test" 단일 값이나 hyphen( ' - ' )으로 연결되어야한다.

ex)) "test" (o) , "test-case" (o), "test case" (x)

 

6) 특정 속성과 특정 속성값으로 시작하는 요소 선택 ( 요소[attribute^="value"]{} )

/* class 속성을 가지고 class명이 "test"로 시작하는 li선택 */
li[class^="test"]{
    color:red;
}

+

"test" 단일 값일 필요가 없고 hyphen( ' - ' )으로 연결될 필요는 없다.

ex)) "test" (o), "testcase" (o), "test-case" (o)

 

7) 특정 속성과 특정 속성값으로 끝나는 요소 선택 ( 요소[attribute$="value"]{} )

/* class 속성을 가지고 class명이 "test"로 끝나는 li선택 */
li[class$="test"]{
    color:red;
}

+

"test" 단일 값일 필요가 없고 hyphen( ' - ' )으로 연결될 필요는 없다.

ex)) "test" (o), "casetest" (o) , "case_test" (o) , "case-test" (o)

 

참고 - "Learn CSS" W3School (https://www.w3schools.com)