How to get element with same data-attr on all site with only css?

user_16363499 0
Viewed 56

There is a task - to randomly find an element with a date-attribute on a site with a large nesting. This task I should do only with CSS, without JS (maybe some compile from SASS or LESS). Someone has an idea how to find any block with [data-some="true"]? Can you help me? please?

<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>
less sass css-selectors css
1 Answers

You was very close and can use [data-some="true"] directly as CSS selector:

[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>

user_153773550
Related