CSS / XPATH Selector Query

Question

A little question to our world of CSS & Xpath Selector I've successfully obtained a text value with XPATH but I can't succeed with a CSS Selector,

Here is my example:

<span class="piggy">
    <i class="fa fa-try"></i>
    <strong>euros (€) !</strong>
270,38K</span>

I can get value "270,38K" without problem with XPATH,

document.evaluate('//*[@id="wrap"]/span/text()', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.textContent.trim();

Res -> 270,38K (good)

But i can't achieve it with a CSS Selector,

document.querySelector('span.piggy').innerText.trim();

Res -> euros (€) ! 270,38K (wrong)

Do you have a clue to only get text value of span (without children content) with a css selector?

Thank you all !

Good one I too would have wondered the same. Btw did you try this in firefox as well? — Vinay
– Vinay, Commented Jan 27, 2020 at 2:12

Patrick Evans · Accepted Answer · 2020-01-27 01:42:43Z

2

Your selector is fine you just have to do a little extra work by getting the text node that contains the wanted text as those cant be obtained by css selector

Get the last child node (which should be a text node) of the element by using lastNode and get the textContent of that

document.querySelector('span.piggy').lastNode.textContent

or use the childNodes list

let nodes = document.querySelector('span.piggy').childNodes;
console.log( nodes[nodes.length-1].textContent );

edited Jan 27, 2020 at 1:42

answered Jan 27, 2020 at 1:35

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS / XPATH Selector Query

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related