Блог

Главная - Вопросы по программированию - Как получить элемент с одинаковыми данными-attr на всем сайте только с помощью css?

Как получить элемент с одинаковыми данными-attr на всем сайте только с помощью css?

#css #sass #css-selectors #less

Вопрос:

Есть задача — случайным образом найти элемент с атрибутом даты на сайте с большой вложенностью. Эту задачу я должен выполнять только с помощью CSS, без JS (возможно, какая-то компиляция из SASS или МЕНЬШЕ). У кого-нибудь есть идея, как найти любой блок с [data-some=»true»]? Вы не могли бы мне помочь? пожалуйста?

 <div id="parent">
    <div class="row-1">
       <div class="child-first></div>
       <div class="child-second>
           <div data-some="true"></div>
           <div data-some="true"></div>
           <div data-some="true"></div>
       </div>
    <div>
    <div class="row-2">
       <div class="child-first></div>
       <div class="child-second>
           <div data-some="true"></div>
           <div data-some="true"></div>
           <div data-some="true"></div>
       </div>
    <div>
    ...
    <div class="row-n">
       <div class="child-first></div>
       <div class="child-second>
           <div data-some="true"></div>
           <div data-some="true"></div>
           <div data-some="true"></div>
       </div>
    <div>
</div>

Ответ №1:

Вы были очень близки и можете использовать [data-some="true"] непосредственно в качестве селектора CSS:

 [data-some="true"] {
  color: red;
} 
 <div id="parent">
  <div class="not_nested">
    <div data-some="false">test</div>
    <div data-some="true">test</div>
    <div data-some="true">test</div>
  </div>
  <div>
    <div class="row-2">
      <div class="nested">
        <div data-some="true">test</div>
        <div data-some="false">test</div>
        <div data-some="true">test</div>
      </div>
    </div>
    <div class="row-n">
      <div class="child-first"></div>
      <div class="child-second">
        <div class="deeper_nested">
          <div data-some="true">test</div>
          <div data-some="true">test</div>
          <div data-some="false">test</div>
        </div>
      </div>
    </div>
  </div>
</div>

Комментарии:

1. Большое спасибо. Но мне нужно взять только один элемент с [data-some=»true»]. Ничего не зная о глубине вложенности, количестве элементов с [data-some=»true»] и именах классов родителей этих элементов

2. Вы можете добавить :first-child или :nth-child() , но вы не можете получить его случайным образом без JavaScript. Даже с САСС или МЕНЬШЕ это невозможно…

3. Я надеялся, что в css появятся новые возможности. Но все равно большое вам спасибо

4. Как насчет :nth-child() — это помешает мне получить доступ к элементам в <div class = «строка-2″>. Если я вызову [data-some=»true»]:n-й ребенок(3) для вашего примера — это даст мне «null».

5. Вы также можете использовать last-child() nth-of-type() или объединить несколько этих селекторов, чтобы получить вложенный элемент. Но для всего этого вам нужно знать структуру HTML, как показано в вашем последнем комментарии. И вы можете забыть о случайном выборе в CSS. Даже в SASS или МЕНЕЕ случайная функция работает только при компиляции CSS для браузера. Скомпилированный CSS снова статичен…

Метки: