How to exclude inner tag using CSS Selectors

Question

I've the following example HTML and looking to extract the text only from the a tag excluding the inner span tag.

<a href="#" class="rate">
 <span>For Sale </span>
$450.00
</a>

Is there a way I can extract the $450 only using CSS Selectors. I tried to use .rate and .rate:not(span) but none of these working

**I'm looking for native CSS solutions only - Like using :not or some other. **

What do you mean by *"extract"* - so you mean "select" and if so, what is it you are trying to do? — Paulie_D, Oct 11 '16 at 09:48
Related - http://stackoverflow.com/questions/15641889/select-text-node-with-css — Paulie_D, Oct 11 '16 at 09:50
if you need to retrieve the amount, you should use Javascript or jQuery, why do you need css anyway? — Emad Dehnavi, Oct 11 '16 at 09:51
I'm using this application for data scraping : https://www.datascraping.co/doc/39/chrome-extension — Vikash Rathee, Oct 11 '16 at 10:02
Do you generate html output? and can you apply bit change on it? — Mohammad, Oct 11 '16 at 10:14
CSS cannot detect text content...so you can't scrape it that way. — Paulie_D, Oct 11 '16 at 10:19

Mohammad · Accepted Answer · 2016-10-11T11:39:09.830

You can use Node.nextSibling to next sibling text of element.

var text = document.querySelector(".rate > span").nextSibling.textContent.trim();
console.log(text);

<a href="#" class="rate">
 <span>For Sale </span>
$450.00
</a>

Edit: If you want to use CSS, you can store price value in data-* attribute of .rate and use :after pseudo-elements in it. You can use attribute value of parent in content property of pseudo-elements using CSS attr.

.rate:after {
  content: attr(data-price);
  color: red;
}

<a href="#" class="rate" data-price="$450.00">
  <span>For Sale </span>
</a>

score 0 · Answer 2 · answered Oct 11 '16 at 10:00

0

Using css you can only hide the element so that its text gets hide.

for ex:

a.rate span {
           display : none;
      }

If you wan to achieve to get text only $450, You should go with Javascript or jquery.

answered Oct 11 '16 at 10:00

Aamir

2,173
1
29
58

How to exclude inner tag using CSS Selectors

2 Answers2