[CSS] CSS 선택자: a로 시작해서 b로 끝나는 클래스 선택하기

일반적인 클래스나 아이디 선택자, 요소선택자 등등은 익히 알고있을것이라 생략하고
HTML 요소의 어떤 속성을 이용한 선택자에 대해서 정리해보았다.

Attribute Selector (속성 선택자)

속성 선택자는 특정 HTML 요소에 특정 속성이 존재하거나 특정 속성 값과 일치하는 요소를 선택하는 데 사용된다.

HTML 요소의 속성 종류

1. id 속성

• 선택자: [id]
• 설명: id 속성이 있는 모든 요소를 선택합니다.

2. class 속성

• 선택자: [class]
• 설명: class 속성이 있는 모든 요소를 선택합니다.

3. type 속성 (input 요소)

• 선택자: [type]
• 설명: type 속성이 있는 모든 요소를 선택합니다.

4. href 속성 (링크 요소)

• 선택자: [href]
• 설명: href 속성이 있는 모든 링크 요소를 선택합니다.

5. src 속성 (이미지 요소)

• 선택자: [src]
• 설명: src 속성이 있는 모든 이미지 요소를 선택합니다.

6. alt 속성 (이미지 요소)

• 선택자: [alt]
• 설명: alt 속성이 있는 모든 이미지 요소를 선택합니다.

7. data- 속성

• 선택자: [data-*] (여기서 *는 임의의 값)
• 설명: data-로 시작하는 사용자 정의 데이터 속성이 있는 모든 요소를 선택합니다.

8. aria- 속성 (접근성 관련 속성)

• 선택자: [aria-*] (여기서 *는 임의의 값)
• 설명: 접근성을 지원하기 위한 aria-로 시작하는 속성이 있는 모든 요소를 선택합니다.

9. target 속성 (링크 요소)

• 선택자: [target]
• 설명: target 속성이 있는 모든 링크 요소를 선택합니다.

10. checked 속성 (체크박스 및 라디오 버튼)

• 선택자: [checked]
• 설명: checked 속성이 있는 모든 체크박스 및 라디오 버튼을 선택합니다.

11. placeholder 속성 (입력 요소)

• 선택자: [placeholder]
• 설명: placeholder 속성이 있는 모든 입력 요소를 선택합니다.

[attribute]

특정 속성을 가진 요소 선택한다.

input[checked] {
  /* checked 속성을 가진 input 요소에 적용될 스타일 */
  background-color: lightblue;
}

[attribute="value"]

특정 값과 일치하는 속성을 가진 요소 선택한다.

[data-role="button"] {
  /* data-role 속성 값이 "button"인 요소에 적용될 스타일 */
  background-color: #008000;
}

[attribute^="value"]

특정 값으로 시작하는 속성을 가진 요소 선택한다.

[class^="a"] {
  /* class 속성 값이 "a"로 시작하는 요소에 적용될 스타일 */
  color: green;
}

[attribute$="value"]:

특정 값으로 끝나는 속성을 가진 요소 선택한다.

[class$="e"] {
  /* class 속성 값이 "e"로 끝나는 요소에 적용될 스타일 */
  text-decoration: underline;
}

[attribute*="value"]

특정 값이 포함된 속성을 가진 요소 선택한다.

[class*="a"] {
  /* class 속성 값에 "a"가 포함된 요소에 적용될 스타일 */
  font-weight: bold;
}

응용: a로 시작하고 b로 끝나는 클래스 선택하기

[class^="a"][class$="b"] {
  /* 여기에 스타일을 적용하세요 */
}