HTML에서 시작 부분은 같고 끝이 다른 ID 요소에 CSS 스타일 일괄 적용하기

공통 접두사를 가진 ID 요소를 한 번에 선택하는 방법

웹 페이지에서 여러 개의 게시물(post)을 표현할 때, 각 요소의 ID가 post-1, post-2, post-3처럼 시작 부분은 동일하지만 끝부분만 다른 경우가 자주 있습니다. 이럴 때마다 하나하나 개별 선택자를 작성하는 것은 비효율적입니다.

CSS의 속성 선택자(Attribute Selector)를 사용하면 이런 ID들을 한 번에 선택하여 스타일을 적용할 수 있습니다.

방법 1: 특정 값으로 시작하는 ID 선택 (^=)

^= 연산자는 따옴표 안의 값으로 시작하는 모든 ID를 가진 요소를 선택합니다.

div[id^='post-'] {
  /* 원하는 스타일 */
}

위 코드는 id 속성값이 'post-'로 시작하는 모든 <div> 요소를 선택합니다. 즉, post-1, post-2 등이 모두 해당됩니다.

방법 2: 특정 값을 포함하는 ID 선택 (*=)

*= 연산자는 따옴표 안의 값을 포함하는 모든 ID를 가진 요소를 선택합니다.

div[id*='post-'] {
  /* 원하는 스타일 */
}

위 코드는 id 속성 어디든 'post-'라는 문자열이 포함되어 있기만 하면 해당 <div> 요소를 모두 선택합니다.

두 방법의 차이점

• [id^='post-']: ID가 반드시 'post-'로 시작해야 합니다. 위치가 엄격하게 제한됩니다.
• [id*='post-']: ID 내 어느 위치든 'post-'를 포함하기만 하면 됩니다. 범위가 더 넓습니다.

따라서 ID의 시작 패턴이 명확히 정해져 있다면 ^=를, 문자열 포함 여부만 확인하면 된다면 *=를 사용하는 것이 좋습니다.

참고: 특정 값으로 끝나는 ID 선택 ($=)

반대로 ID가 특정 값으로 끝나는 경우를 선택하려면 $= 연산자를 사용할 수 있습니다.

div[id$='-post'] {
  /* '-post'로 끝나는 모든 div 선택 */
}

실전 예제

<div id="post-1">첫 번째 게시물</div>
<div id="post-2">두 번째 게시물</div>
<div id="post-3">세 번째 게시물</div>

div[id^='post-'] {
  border: 1px solid #ddd;
  padding: 16px;
  margin-bottom: 12px;
}

이처럼 CSS 속성 선택자를 활용하면 규칙적인 패턴을 가진 ID 요소들을 간결하고 유지보수하기 쉬운 코드로 스타일링할 수 있습니다.