내가 몰랐던 부분만 정리
mdn, web.dev 참고
특성 선택자 (Attribute Selector)
- 속성 선택자
- 특정 HTML 속성이 있거나
HTML 속성에 대한 특정 값이 있는 요소를 찾을 수 있습니다. - 대괄호
[]로 묶어 CSS가 속성을 찾도록 지시합니다. - 예시
[data-type='primary'] {
color: red;
}이 CSS는 primary 값을 가진 data-type 속성이 있는 모든 요소를 찾는다.
<div data-type="primary"></div>그래서 위의 div 요소의 텍스트의 색상은 모두 빨간색이 된다.
1. 구문
[attr]
attr이라는 이름의 특성을 가진 요소를 선택합니다.
[attr=value]
attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다.
[attr~=value]
attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다.
attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.
[attr|=value]
attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다.
보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용합니다.
[attr^=value]
attr이라는 특성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
[attr$=value]
attr이라는 특성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
[attr*=value]
attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.
[attr operator value i]
괄호를 닫기 전에 i 혹은 I를 붙여주면 값의 대소문자를 구분하지 않습니다.
(ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)
[attr operator value s] 🧪
괄호를 닫기 전에 s 혹은 S를 붙여주면 값의 대소문자를 구분합니다.
(ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)
