Как лаконичнее всего выбрать селекторы?
Есть двадцать с лишним див элементов, каждый имеет id, состоящие только из одной буквы, от A до Z - т..е. div id="A", div id="B", div id="C" и т.д.
Общих классов нет. Есть общее CSS свойство. Можно ли как нибудь выбрать селекторы одним махом или придется все писать либо общий класс добавлять?
Дополнительно:
Чтобы мы могли вам что-то адекватное ответить, мы должны видеть ваш HTML.
пожалуйста.
<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> |
<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>
Всем спасибо
Через положение в DOM. Например, через общего родителя.
- это понятно, но там не очень хорошо всё - контент сгенерирован page builder, и там большинство родительских селекторов рандомно сгенерированы и после каждого деплоя и очистки кеша меняются.
Первый родитель у каждого нужного элемента - div data-element="content", но это мне ничего не дает, так как на странице куча других таких элементов с таким родителем, но отличных от нужных мне.
Думал может можно хитро как мы описываем регэкспами, с чего начинается или на что заканчивается. - lagudal,
с чего начинается или на что заканчивается
это можно селектором, но только нужно указать с чего/на что именно
регэкспами
это только на js отфильтровать
- lagudal, ну тогда пляшите от body, с точным указанием потомков элементов через > . Наверняка, структура документа достаточно стабильная.
body > div[data-element="content"] > div[class="какой-то класс"] > div[data-="еще какой-то дата атрибут"] > ... > div[id] /* целевой элемент */ { }
body > div[data-element="content"] > div[class="какой-то класс"] > div[data-="еще какой-то дата атрибут"] > ... > div[id] /* целевой элемент */ { }
Если они лежат на одном уровне, и у их родителя есть определенный id/class, то этим дивам вообще не нужно никак обозначаться, чтобы на них навешать стили:
контейнер_div_ов > div { /* стили элементов абвгдейки */ } |
контейнер_div_ов > div { /* стили элементов абвгдейки */ }
Можно уточнить, что все div_ы с id атрибутом использовать:
контейнер_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> |
<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>
div[id], лучше от родителя .parent div[id]
Ответы:
Если это не учебное задание не стоит. Можно без класса, например они все и только они на одном уровне вложенности внутри родителя - это самый простой вариант.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для выбора селекторов в CSS можно использовать различные методы, чтобы сделать код более лаконичным и эффективным. Ниже приведены некоторые советы, которые помогут вам выбирать селекторы более эффективно:
1. **Используйте классы и идентификаторы**: Вместо использования селекторов по тегам (например, `div`, `p`, `a`), лучше использовать классы и идентификаторы для выбора элементов. Это позволит вам более точно выбирать нужные элементы на странице.
2. **Избегайте вложенности селекторов**: Пытайтесь избегать слишком глубокой вложенности селекторов, так как это может сделать код менее читаемым и увеличить сложность его поддержки.
3. **Используйте комбинаторы**: Для выбора элементов с определенными связями между ними (например, дочерние или соседние элементы), можно использовать комбинаторы, такие как `>`, `+`, `~`.
4. **Избегайте универсальных селекторов**: Использование универсальных селекторов (например, `*`) может привести к ненужным переборам элементов на странице. Лучше указывать конкретные типы элементов или классы.
5. **Используйте псевдоклассы и псевдоэлементы**: Для выбора элементов в определенном состоянии или для стилизации определенных частей элемента, используйте псевдоклассы (например, `:hover`, `:nth-child()`) и псевдоэлементы (например, `::before`, `::after`).
Пример использования селекторов в CSS:
/* Выбор всех элементов с классом "example" */ .example { color: red; } /* Выбор всех дочерних элементов .parent */ .parent > .child { font-weight: bold; } /* Выбор каждого второго элемента с классом "item" */ .item:nth-child(2n) { background-color: lightgrey; } /* Выбор всех ссылок, которые находятся в состоянии "hover" */ a:hover { text-decoration: underline; }
Соблюдение этих советов поможет сделать ваш CSS код более лаконичным, читаемым и эффективным.