How to select a specific element according to a text

Question

I want to change the css of an element based only on the title value. I would like to be able to change only the css property of the button where the title is This one. I can't modify the HTML.

.x-window > .x-window-bl > .x-window-br > .x-window-bc > .x-window-footer > .x-panel-fbar > .x-toolbar-ct > tbody > tr > td > table > tbody > tr > td > table > tbody > .x-toolbar-right-row > .x-toolbar-cell > table > .x-btn-small > tr > td:nth-child(2) > em > button{
  background-color:red
}

<div id="ext-comp-1063" class=" x-window x-window-plain x-resizable-pinned">
   <div class="x-window-tl">
      <div class="x-window-tr">
         <div class="x-window-tc">
            <div class="x-window-header x-unselectable x-panel-icon x-deluge-remove-window-icon x-window-draggable" id="ext-gen215">
               <div class="x-tool x-tool-close" id="ext-gen221">&nbsp;</div>
               <span class="x-window-header-text" id="ext-gen226">This one</span>
            </div>
         </div>
      </div>
   </div>
   <div class="x-window-bl" id="ext-gen219">
      <div class="x-window-br">
         <div class="x-window-bc">
            <div class="x-window-footer x-panel-btns" id="ext-gen218" style="width: 328px;">
               <div id="ext-comp-1064" class="x-panel-fbar x-small-editor x-toolbar-layout-ct" style="width: auto;">
                  <table cellspacing="0" class="x-toolbar-ct">
                     <tbody>
                        <tr>
                           <td class="x-toolbar-right" align="right">
                              <table cellspacing="0" class="x-toolbar-right-ct">
                                 <tbody>
                                    <tr>
                                       <td>
                                          <table cellspacing="0">
                                             <tbody>
                                                <tr class="x-toolbar-right-row">
                                                   <td class="x-toolbar-cell" id="ext-gen227">
                                                      <table id="ext-comp-1065" cellspacing="0" class="x-btn x-btn-noicon" style="width: auto;">
                                                         <tbody class="x-btn-small x-btn-icon-small-left">
                                                            <tr>
                                                               <td class="x-btn-ml"><i>&nbsp;</i></td>
                                                               <td class="x-btn-mc"><em class="" unselectable="on"><button type="button" id="ext-gen228" class=" x-btn-text">Cancel</button></em></td>
                                                               <td class="x-btn-mr"><i>&nbsp;</i></td>
                                                            </tr>
                                                         </tbody>
                                                      </table>
                                                   </td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div id="ext-comp-1063" class=" x-window x-window-plain x-resizable-pinned">
   <div class="x-window-tl">
      <div class="x-window-tr">
         <div class="x-window-tc">
            <div class="x-window-header x-unselectable x-panel-icon x-deluge-remove-window-icon x-window-draggable" id="ext-gen215">
               <div class="x-tool x-tool-close" id="ext-gen221">&nbsp;</div>
               <span class="x-window-header-text" id="ext-gen226">Not this one</span>
            </div>
         </div>
      </div>
   </div>
   <div class="x-window-bl" id="ext-gen219">
      <div class="x-window-br">
         <div class="x-window-bc">
            <div class="x-window-footer x-panel-btns" id="ext-gen218" style="width: 328px;">
               <div id="ext-comp-1064" class="x-panel-fbar x-small-editor x-toolbar-layout-ct" style="width: auto;">
                  <table cellspacing="0" class="x-toolbar-ct">
                     <tbody>
                        <tr>
                           <td class="x-toolbar-right" align="right">
                              <table cellspacing="0" class="x-toolbar-right-ct">
                                 <tbody>
                                    <tr>
                                       <td>
                                          <table cellspacing="0">
                                             <tbody>
                                                <tr class="x-toolbar-right-row">
                                                   <td class="x-toolbar-cell" id="ext-gen227">
                                                      <table id="ext-comp-1065" cellspacing="0" class="x-btn x-btn-noicon" style="width: auto;">
                                                         <tbody class="x-btn-small x-btn-icon-small-left">
                                                            <tr>
                                                               <td class="x-btn-ml"><i>&nbsp;</i></td>
                                                               <td class="x-btn-mc"><em class="" unselectable="on"><button type="button" id="ext-gen228" class=" x-btn-text">Cancel</button></em></td>
                                                               <td class="x-btn-mr"><i>&nbsp;</i></td>
                                                            </tr>
                                                         </tbody>
                                                      </table>
                                                   </td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Why is it a duplicate ? The data contained in the title isn't on the same layer of the button

Quick JS fix will work here! But would like to follow on to this if we can get this done with CSS. — Satyam Pathak, Dec 26 '18 at 10:51
It got a duplicate, but I had spent some time on this. Please refer https://codepen.io/satyamqainfotech/pen/ebRXdM — Satyam Pathak, Dec 26 '18 at 11:36
Can you explain what this line do ? `let buttonContainer = b.closest('.c').nextSibling.nextSibling` — executable, Dec 26 '18 at 11:51
Here is how you can utilize the dupe link logic with javascript: https://jsfiddle.net/nq9od431/ — Asons, Dec 26 '18 at 11:56
@executable The `nextSibling` finds both text and element nodes, you should use what I suggested in my fiddle, `nextElementSibling`. — Asons, Dec 26 '18 at 12:00
@executable I closed it as a dupe as one can't do what you asked with CSS. As you then added script to your tags list, I decided to both post a solution in a comment, and have also now added one more dupe links, which shows a similar solution. Do you find it okay with that? — Asons, Dec 26 '18 at 12:12

Rahul · Answer 1 · 2018-12-26T10:57:29.940

-1

You can use data attribute like this to achieve same result

[data-content="this one"] {
    color: red;
}

<div data-content="this one">This one</div>
<div data-content="not this one">Not This one</div>

I have change your demo a bit with above code see https://jsfiddle.net/8th9xrm5/

edited Dec 26 '18 at 10:57

answered Dec 26 '18 at 10:53

Rahul

4,294
1
10
12

1

Yes but I can't change the HTML. You can check data in css with `contains(text)` – executable Dec 26 '18 at 10:54
what I gave you is logic, see my updated answer I have provided solution in your code, but yes you have to add data attribute to make it work – Rahul Dec 26 '18 at 10:58
1

`contains(text)` is in jquery you cant do this in css only – Rahul Dec 26 '18 at 11:09
Oh right, thank you to point it out – executable Dec 26 '18 at 11:11

score -1 · Answer 2 · answered Dec 26 '18 at 11:01

Use first-child

.x-window:first-child .x-window-bl > .x-window-br > .x-window-bc > .x-window-footer > .x-panel-fbar > .x-toolbar-ct > tbody > tr > td > table > tbody > tr > td > table > tbody > .x-toolbar-right-row > .x-toolbar-cell > table > .x-btn-small > tr > td:nth-child(2) > em > button{
  background-color:red
}

<div id="ext-comp-1063" class=" x-window x-window-plain x-resizable-pinned">
   <div class="x-window-tl">
      <div class="x-window-tr">
         <div class="x-window-tc">
            <div class="x-window-header x-unselectable x-panel-icon x-deluge-remove-window-icon x-window-draggable" id="ext-gen215">
               <div class="x-tool x-tool-close" id="ext-gen221">&nbsp;</div>
               <span class="x-window-header-text" id="ext-gen226">This one</span>
            </div>
         </div>
      </div>
   </div>
   <div class="x-window-bl" id="ext-gen219">
      <div class="x-window-br">
         <div class="x-window-bc">
            <div class="x-window-footer x-panel-btns" id="ext-gen218" style="width: 328px;">
               <div id="ext-comp-1064" class="x-panel-fbar x-small-editor x-toolbar-layout-ct" style="width: auto;">
                  <table cellspacing="0" class="x-toolbar-ct">
                     <tbody>
                        <tr>
                           <td class="x-toolbar-right" align="right">
                              <table cellspacing="0" class="x-toolbar-right-ct">
                                 <tbody>
                                    <tr>
                                       <td>
                                          <table cellspacing="0">
                                             <tbody>
                                                <tr class="x-toolbar-right-row">
                                                   <td class="x-toolbar-cell" id="ext-gen227">
                                                      <table id="ext-comp-1065" cellspacing="0" class="x-btn x-btn-noicon" style="width: auto;">
                                                         <tbody class="x-btn-small x-btn-icon-small-left">
                                                            <tr>
                                                               <td class="x-btn-ml"><i>&nbsp;</i></td>
                                                               <td class="x-btn-mc"><em class="" unselectable="on"><button type="button" id="ext-gen228" class=" x-btn-text">Cancel</button></em></td>
                                                               <td class="x-btn-mr"><i>&nbsp;</i></td>
                                                            </tr>
                                                         </tbody>
                                                      </table>
                                                   </td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div id="ext-comp-1063" class=" x-window x-window-plain x-resizable-pinned">
   <div class="x-window-tl">
      <div class="x-window-tr">
         <div class="x-window-tc">
            <div class="x-window-header x-unselectable x-panel-icon x-deluge-remove-window-icon x-window-draggable" id="ext-gen215">
               <div class="x-tool x-tool-close" id="ext-gen221">&nbsp;</div>
               <span class="x-window-header-text" id="ext-gen226">Not this one</span>
            </div>
         </div>
      </div>
   </div>
   <div class="x-window-bl" id="ext-gen219">
      <div class="x-window-br">
         <div class="x-window-bc">
            <div class="x-window-footer x-panel-btns" id="ext-gen218" style="width: 328px;">
               <div id="ext-comp-1064" class="x-panel-fbar x-small-editor x-toolbar-layout-ct" style="width: auto;">
                  <table cellspacing="0" class="x-toolbar-ct">
                     <tbody>
                        <tr>
                           <td class="x-toolbar-right" align="right">
                              <table cellspacing="0" class="x-toolbar-right-ct">
                                 <tbody>
                                    <tr>
                                       <td>
                                          <table cellspacing="0">
                                             <tbody>
                                                <tr class="x-toolbar-right-row">
                                                   <td class="x-toolbar-cell" id="ext-gen227">
                                                      <table id="ext-comp-1065" cellspacing="0" class="x-btn x-btn-noicon" style="width: auto;">
                                                         <tbody class="x-btn-small x-btn-icon-small-left">
                                                            <tr>
                                                               <td class="x-btn-ml"><i>&nbsp;</i></td>
                                                               <td class="x-btn-mc"><em class="" unselectable="on"><button type="button" id="ext-gen228" class=" x-btn-text">Cancel</button></em></td>
                                                               <td class="x-btn-mr"><i>&nbsp;</i></td>
                                                            </tr>
                                                         </tbody>
                                                      </table>
                                                   </td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

In my case I don't know on which position it would be. I can only get the element depending on the title — executable, Dec 26 '18 at 11:02

score -1 · Answer 3 · answered Dec 26 '18 at 11:22

-1

You can achieve that with JavaScript like that:

<script>
getElementsByContains = function(str,elmtTagName="*",node=document){
  var elms = document.evaluate( "//"+elmtTagName+"[contains(., '" +str+ "')]" ,node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null ), nodeSet = [];
  for ( var i=0 ; i < elms.snapshotLength; i++ ){  
    nodeSet.push(elms.snapshotItem(i));
  }
return nodeSet;
}
getElementsByContains('Cancel','button')[0].style.background ='red';

</script>

modified from this answer.

answered Dec 26 '18 at 11:22

A. Meshu

4,053
2
20
34

I don't understand how you get by the title value – executable Dec 26 '18 at 11:24
Sorry i probably misread/misunderstand the question. – A. Meshu Dec 26 '18 at 11:25
I don't know the position in my code (it's dynamic), I only know the title value – executable Dec 26 '18 at 11:26

How to select a specific element according to a text

3 Answers3