How to grab a Child by its innerHTML value using CSS Selector?

Question

I have this HTML

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute; top: 141px; left: 309px;">
        <li data-value="1" class="visible">All</li>
        <li data-value="1" class="visible">John (123)</li>
        <li data-value="1" class="visible">Mary (456)</li>
        <li data-value="1" class="visible">Kelly (987)</li>

The parent has class "ui-autocomplete-list smart-close-iztgn224" and it has 4 children.

What CSS Selector can I use to grab the child containing "Mary" ?

I tried using

document.querySelector("ul.ui-autocomplete-list > li.visible");

But I don't know how to grab a child by its innerHTML value.

Thanks.

Have a look here: http://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text — Mijago, Mar 03 '17 at 07:18

score 1 · Answer 1 · answered Mar 03 '17 at 07:31

css selectors do not provide a means to select element by .textContent or .innerHTML. You can include an additional data-* attribute, or use JSON at data-* attribute and use attribute selectors

document.querySelector("li[data-name='Mary']").style.color = "sienna";

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute;">
  <li data-value="1" data-name="All" class="visible">All</li>
  <li data-value="1" data-name="John" class="visible">John (123)</li>
  <li data-value="1" data-name="Mary" class="visible">Mary (456)</li>
  <li data-value="1" data-name="Kelly" class="visible">Kelly (987)</li>
</ul>

document.querySelector("li[data-props*='Mary']").style.color = "sienna";

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute;">
  <li data-props='{"value":"1", "name":"All"}' class="visible">All</li>
  <li data-props='{"value":"1", "name":"John"}' class="visible">John (123)</li>
  <li data-props='{"value":"1", "name":"Mary"}' class="visible">Mary (456)</li>
  <li data-props='{"value":"1", "name":"Kelly"}' class="visible">Kelly (987)</li>
</ul>

score 1 · Answer 2 · answered Mar 03 '17 at 07:36

You can't grab innerHTML value using CSS selectors, However if you wise you can get all the li element and use forEach() to target the desired element.

var elements = document.querySelectorAll("ul.ui-autocomplete-list > li.visible");
elements.forEach(function(elem) {
  if (elem.textContent.includes('Mary'))
    elem.classList.add('red')
});

.red {
  color: red
}

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute; top: 141px; left: 309px;">
  <li data-value="1" class="visible">All</li>
  <li data-value="1" class="visible">John (123)</li>
  <li data-value="1" class="visible">Mary (456)</li>
  <li data-value="1" class="visible">Kelly (987)</li>
</ul>

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

You cannot get the innerHTML value using css selector and querySelector uses CSS selectors. If you can use Jquery then it can be simply accomplished by using contains Selector.

$("ul.ui-autocomplete-list > li:contains('John')").css( "color", "red" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute; top: 141px; left: 309px;">
        <li data-value="1" class="visible">All</li>
        <li data-value="1" class="visible">John (123)</li>
        <li data-value="1" class="visible">Mary (456)</li>
        <li data-value="1" class="visible">Kelly (987)</li>
</ul>

Another thing you can do If you are restricted to use only JS is you can add data-attribute to the each li elements and selects the elements based on their data-attribute value

score 1 · Accepted Answer · answered Mar 03 '17 at 08:07

if you can use jQuery,you can use contains selector:

$(("ul.ui-autocomplete-list > li:contains('mary')"))

for native javascript, this works:

var mary = [].slice.call(document.querySelectorAll("ul.ui-autocomplete-list > li.visible")).filter(function (item){
    return item.innerText.includes("mary");
})[0];

How to grab a Child by its innerHTML value using CSS Selector?

4 Answers4