CODEWITHSUNDEEP
htmlcss
Vikash Rathee
Vikash Rathee

Reputation: 2064

How to exclude inner tag using CSS Selectors

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

Upvotes: 0

Views: 842

Answers (2)

Mohammad
Mohammad

Reputation: 21489

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>

Upvotes: 1

Aamir
Aamir

Reputation: 2283

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.

Upvotes: 0

Related Questions