Есть ли селектор CSS для выбора div, у которых есть номер в качестве идентификатора - PullRequest
Новая
       31

Есть ли селектор CSS для выбора div, у которых есть номер в качестве идентификатора

0 голосов
/ 01 августа 2020

Я хочу выбрать несколько div на странице HTML, у которых есть атрибут id, содержащий число. Я не могу придумать селектор CSS. Должен ли я go пройти через все div и проверить их атрибуты id или для этого есть селектор magi c CSS. 

...
<div id="56142307907">...</div>
...
<div id="58308926711">...</div>
...

Примечание

только A JS решение является предпочтительным

Ответы [ 3 ]

3 голосов
/ 01 августа 2020

Нет.

Если вы посмотрите спецификацию , вы увидите, что наиболее близкими к этому являются различные селекторы атрибутов, но они соответствуют только точным строкам или подстрокам.

Поскольку вы упомянули JS, самым простым подходом, вероятно, было бы получить все div с идентификатором, а затем отфильтровать их. 

const regex = /^\d+$/;
const filter = element => regex.test(element.id);
const divs_with_ids = document.querySelectorAll("div[id]");
const divs_with_numeric_ids = Array.from(divs_with_ids).filter(filter);
console.log(divs_with_numeric_ids);
<div></div>
<div id="134"></div>
<p id="234"></div>
<div id="13d4"></div>
<div id="54354"></div>
<div id="5643f"></div>
<div id="454354"></div>
0 голосов
/ 02 августа 2020

Вы можете сделать это в чистом виде CSS ...

... если вы очень решительно.

Доступные символы

HTML4 spe c говорит:

ID и NAME токены должны начинаться с буквы ([A-Za-z]), за ними может следовать любое количество букв, цифр ([0-9]), дефисов ("-"), подчеркиваний ("_"), двоеточий ( ":") и точки (".").

HTML5 расширяет пул доступных символов:

the * 1026 Значение атрибута * id должно быть уникальным среди всех идентификаторов в дереве элемента и должно содержать хотя бы один символ. Значение не должно содержать пробелов ASCII.

Решение

Я буду исходить из предположения, что вы используете только буквы, цифры и -_:. в качестве идентификаторов в своей DOM. Если вам нужен более жесткий селектор, просто добавьте к нему больше элементов.

Итак ... вот селектор монстров, который соответствует вышеуказанным критериям: 

div[id^='0']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='1']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='2']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='3']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='4']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='5']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='6']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='7']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='8']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='9']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.'])


div {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin: 0.5rem;
  border: 3px solid transparent;
  border-radius: 0.5rem;
  font-family: sans-serif;
  font-size: 12pt;
  width: 20rem;
  background-color: #ddf;
}

div[id^='0']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='1']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='2']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='3']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='4']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='5']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='6']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='7']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='8']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']),
div[id^='9']:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*=':']):not([id*='.']) {
  border-color: black;
}
<div id="1">id: 1</div>
<div id="23">id: 23</div>
<div id="345">id: 345</div>
<div id="4567">id: 4567</div>
<div id="56789">id: 56789</div>
<div id="12345-6789">id: 12345-6789</div>
<div id="0123-some-text-here-4567">id: 0123-some-text-here-4567</div>
<div id="000-starts-with-digits">id: 000-starts-with-digits</div>
<div id="ends-with-digits-321">id: ends-with-digits-321</div>
<div id="only-text">id: only-text</div>
<div>(id is not provided)</div>
<div id>(id has no value)</div>
<div id="">(id is an empty string)</div>

Пояснение

CSS позволяет выбирать элементы по значениям их атрибутов. Синтаксис включает селектор [attr*=value], который можно использовать для проверки подстрок.

Соединив этот селектор, окруженный :not(), можно отфильтровать все нежелательные значения.

Обратите внимание, что каждый из комбинированных селекторов начинается с [id^='digit'], от 0 до 9. Без этого он мог бы соответствовать элементам с пустым идентификатором. Если указать, что строка начинается с di git, соответствующие элементы отфильтровываются.

Чуть более простой подход

Вы можете go с в десять раз более коротким селектором, но он будет выбирать элементы с пустым идентификатором, то есть <div id></div> и <div id=""></div>. Если вы не возражаете против недостатков, вы можете использовать это: 

div[id]:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*='.']):not([id*=':'])


div {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin: 0.5rem;
  border: 3px solid transparent;
  border-radius: 0.5rem;
  font-family: sans-serif;
  font-size: 12pt;
  width: 20rem;
  background-color: #ddf;
}

div[id]:not([id*='A' i]):not([id*='B' i]):not([id*='C' i]):not([id*='D' i]):not([id*='E' i]):not([id*='F' i]):not([id*='G' i]):not([id*='H' i]):not([id*='I' i]):not([id*='J' i]):not([id*='K' i]):not([id*='L' i]):not([id*='M' i]):not([id*='N' i]):not([id*='O' i]):not([id*='P' i]):not([id*='Q' i]):not([id*='R' i]):not([id*='S' i]):not([id*='T' i]):not([id*='U' i]):not([id*='V' i]):not([id*='W' i]):not([id*='X' i]):not([id*='Y' i]):not([id*='Z' i]):not([id*='-']):not([id*='_']):not([id*='.']):not([id*=':']) {
  border-color: black;
}
<div id="1">id: 1</div>
<div id="23">id: 23</div>
<div id="345">id: 345</div>
<div id="4567">id: 4567</div>
<div id="56789">id: 56789</div>
<div id="12345-6789">id: 12345-6789</div>
<div id="0123-some-text-here-4567">id: 0123-some-text-here-4567</div>
<div id="000-starts-with-digits">id: 000-starts-with-digits</div>
<div id="ends-with-digits-321">id: ends-with-digits-321</div>
<div id="only-text">id: only-text</div>
<div>(id is not provided)</div>
<div id>(id has no value)</div>
<div id="">(id is an empty string)</div>
0 голосов
/ 01 августа 2020

Нет такого селектора, который мог бы играть с идентификаторами, имеющими числовые значения. Однако data-id может вам пригодиться.

Например, ваш div выглядит так: 

<div id="12345"></div>

Добавьте к нему атрибут data-d, чтобы он выглядел так: 

<div id="12345" data-id="12345"></div>

И тогда для этой цели может быть использован querySelector в атрибуте data. 

document.querySelector('[data-id="12345"')

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

...