CSSセレクタを使用して内部タグを除外する方法

Question

次の例のHTMLは、spanタグを除いてaタグからのみテキストを抽出することを目的としています。

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

CSSセレクタを使用して$ 450しか抽出できない方法はありますか？ .rateと.rate:not(span)を使用しようとしましたが、これらのいずれも使用できませんでした。

**ネイティブCSSソリューションをお探しですか？ **

Answer 1

Node.nextSiblingは、要素の次の兄弟テキストに使用できます。

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

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

編集： あなたはCSSを使用したい場合は、.rateのdata-*属性に価格値を格納し、その中に:after擬似要素を使用することができます。 CSS attrを使用して、擬似要素のcontentプロパティのparentの属性値を使用できます。そのテキストが非表示になるように、あなたが唯一の要素を非表示にすることができ、CSSを使用して

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

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

Answer 2

。 EX用

：あなたはテキストにのみ$ 450得るために達成するために弱々しい場合

a.rate span { 
      display : none; 
     } 

、あなたはJavascriptやjQueryを使って行く必要があります。