Как лаконичнее всего выбрать селекторы?

Question

[lagudal]

Есть двадцать с лишним див элементов, каждый имеет id, состоящие только из одной буквы, от A до Z - т..е. div id="A", div id="B", div id="C" и т.д.
Общих классов нет. Есть общее CSS свойство. Можно ли как нибудь выбрать селекторы одним махом или придется все писать либо общий класс добавлять?

Comments

[Алексей Уколов]

Чтобы мы могли вам что-то адекватное ответить, мы должны видеть ваш HTML.

[lagudal]

Алексей Уколов,
пожалуйста.

<div id="A">
.....content for A ....
</div>
<div id="B">
.....content for B ....
</div>
<div id="C">
.....content for C....
</div>
<div id="D">
.....content for D ....
</div>
<div id="E">
.....content for E ....
</div>

[Алексей Уколов]

lagudal, нужно показывать весь реальный HTML. Кто является родителем этих элементов? Есть ли у этого родителя другие потомки? От ответов на эти вопросы зависит решение.

[lagudal]

Это я найду самостоятельно, спасибо, если типа регэкспами нельзя, то вопрос можно закрыть или удалить.
Всем спасибо

Answer 1

[Rsa97]

Через положение в DOM. Например, через общего родителя.

Comments

[lagudal]

это понятно, но там не очень хорошо всё - контент сгенерирован page builder, и там большинство родительских селекторов рандомно сгенерированы и после каждого деплоя и очистки кеша меняются.
Первый родитель у каждого нужного элемента - div data-element="content", но это мне ничего не дает, так как на странице куча других таких элементов с таким родителем, но отличных от нужных мне.
Думал может можно хитро как мы описываем регэкспами, с чего начинается или на что заканчивается.

[Виктор]

lagudal,

с чего начинается или на что заканчивается

это можно селектором, но только нужно указать с чего/на что именно

регэкспами

это только на js отфильтровать

[alexalexes]

lagudal, ну тогда пляшите от body, с точным указанием потомков элементов через > . Наверняка, структура документа достаточно стабильная.

body > div[data-element="content"] > div[class="какой-то класс"] > div[data-="еще какой-то дата атрибут"] > ... > div[id] /* целевой элемент */
{
}

Answer 2

[alexalexes]

Если они лежат на одном уровне, и у их родителя есть определенный id/class, то этим дивам вообще не нужно никак обозначаться, чтобы на них навешать стили:

контейнер_div_ов > div
{
  /* стили элементов абвгдейки */
}

Можно уточнить, что все div_ы с id атрибутом использовать:

контейнер_div_ов > div[id]
{
  /* стили элементов абвгдейки */
}

PS: Если все по науке называть, то вопрос, вообще, не возникнет, как навешивать стили:

<div class="alphabet">
  <div id="A" class="alphabet__item"></div>
  <div id="B" class="alphabet__item"></div>
  <div id="C" class="alphabet__item"></div>
  ...
</div>

Answer 3

[Виктор]

div[id], лучше от родителя .parent div[id]

Answer 4

[psiklop]

Если это не учебное задание не стоит. Можно без класса, например они все и только они на одном уровне вложенности внутри родителя - это самый простой вариант.