문자열 선택자

"문자열 선택자"라는 용어는 CSS에서 특정 문자열을 기반으로 요소를 선택하는 다양한 선택자들을 통칭하는 넓은 의미입니다. 말씀하신 "비슷한 이름을 가진 모든 요소를 선택하는 것"은 문자열 선택자의 한 종류인 속성 값의 시작 문자열 선택자에 해당합니다.

1. 문자열 선택자의 종류

CSS에서 문자열을 기반으로 요소를 선택하는 선택자는 다음과 같이 다양하게 존재합니다.

1. 속성 값의 시작 문자열 선택자 ([attribute^="value"]):
   • 지정된 속성 값이 특정 문자열로 시작하는 요소를 선택합니다.
   • 예시: [class^="slid-item"]
2. 속성 값의 끝 문자열 선택자 ([attribute$="value"]):
   • 지정된 속성 값이 특정 문자열로 끝나는 요소를 선택합니다.
   • 예시: [class$="-last"]
3. 속성 값의 부분 문자열 선택자 ([attribute*="value"]):
   • 지정된 속성 값이 특정 문자열을 포함하는 요소를 선택합니다.
   • 예시: [class*="item"]
4. 속성 값의 정확한 일치 선택자 ([attribute="value"]):
   • 지정된 속성 값이 특정 문자열과 정확히 일치하는 요소를 선택합니다.
   • 예시: [class="slid-item"]
5. 속성 값의 단어 일치 선택자 ([attribute~="value"]):
   • 지정된 속성 값이 공백으로 분리된 단어 중 특정 문자열을 포함하는 요소를 선택합니다.
   • 예시: [class~="item"]
6. 속성 값의 하이픈 일치 선택자 ([attribute|="value"]):
   • 지정된 속성 값이 특정 문자열로 시작하거나, value-로 시작하는 요소를 선택합니다.
   • 예시: [class|="slid"]

2. 핵심 요약

• "문자열 선택자"는 특정 문자열을 기반으로 요소를 선택하는 다양한 선택자들을 통칭하는 넓은 의미입니다.
• "비슷한 이름을 가진 모든 요소를 선택하는 것"은 속성 값의 시작 문자열 선택자에 해당하며, 다른 문자열 선택자들도 존재합니다.

따라서 모든 문자열 선택자가 비슷한 이름을 가진 요소를 선택하는 것은 아닙니다. 각 선택자는 특정 문자열 패턴에 따라 요소를 선택합니다.