如何使用CSS选择器排除内部标签

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. **

Answer 1

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> 

Answer 2

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.