find css selector with totally text matched

Question

anyone know how to write css selector to find a element that include exactly text. I have tried label:contains("^ab$") or label[innertext="ab"] or label[text="ab"] none of them works

<div>
<label>ab</label>
<label>ab cd</label>
<label>ab asd cd</label>
</div>

I only want to find the element <label>ab</label>

If possible, changing the markup to be `` would allow you to have a straight selector, rather than having to find the elements and then filter them. — Taplar, Aug 12 '20 at 19:15

score 0 · Answer 1 · answered Aug 12 '20 at 19:00

It is not possible through CSS.

Read here for more info.

https://stackoverflow.com/a/1520469/7030091

Basically they thought about adding it to CSS3 but didn't as it would likely be hard to make it effient.

You can do this through Javascript however. The previous link also has an example of this.

score 0 · Answer 2 · answered Aug 12 '20 at 20:23

If you can use jquery, you could just filter the elements that contain the specific string, using the filter function:

function getElementWithValue(elems, value){
    return elems.filter(function(index){
        return $(this).text() == value;
    });
}

$(document).ready(function(){
    var resultLabel = getElementWithValue($('label'), 'ab');
});

<div>
<label>ab</label>
<label>ab cd</label>
<label>ab asd cd</label>
</div>

find css selector with totally text matched

2 Answers2