CSS3 селектор для поиска номеров в идентификаторе элемента

Question

Я хочу присвоить собственное свойство CSS указанному диапазону элементов, идентифицированных числом в id.

HTML:

<div id="game">
  <div id="game-board-field-1-street-name"></div>
  <div id="game-board-field-2-street-name"></div>
  <div id="game-board-field-3-street-name"></div>
  <div id="game-board-field-4-street-name"></div>
  ...
  <div id="game-board-field-11-street-name"></div>
  <div id="game-board-field-12-street-name"></div>
  <div id="game-board-field-13-street-name"></div>
  <div id="game-board-field-14-street-name"></div>
  ... too many ...
</div>

CSS:

#game div[id$=street-name] { /* I want this selector to get applied only to streets 1-4 */
  font-size: 10px;
}

#game div[id$=street-name] { /* This one to streets 11-14 */
  font-size: 14px;
}

Есть ли способы справиться с этим только с помощью CSS?

Answer 1

Вы не можете выбирать напрямую по их пронумерованным идентификаторам, так как CSS не предоставляет динамических селекторов атрибутов.

Однако, если ваша структура такова, что каждый пронумерованный div соответствует его позиции в родительском элементе #game, вы можете использовать вместо :nth-child():

/* First 4 elements */
#game div:nth-child(-n+4) {
  font-size: 10px;
}

/* Elements starting from the 11th and ending at the 14th */
#game div:nth-child(n+11):nth-child(-n+14) {
  font-size: 10px;
}