CSS selection query for just parent content - html

Question

Say I have the following.
<div class="price">$64 used
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
I only want to select the "$64 used", not the rest in the child spans. How would I do something like this? I have tried selecting like below and none work.
article > .price
article > .price:not(span)
article > div:not(span)
article > div:not(.originally):not(.you-save)
EDIT: For clarification..
const test = document.querySelector('section > div.price');
console.log(test.innerText);
$64 Used$160 New
You save 60%
I only want $64 Used. Is this even possible? I did not make the site, I am trying to scrape this.

Answer 1

div.price
do the work. For me, better is just use
.price.

Answer 2

Just make a small change:
<div class="price">
<span>$64 used</span>
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
CSS:
article > .price > span:not([class]) { color: red; }

Answer 3

This is not how tag:not() works. You can exclude a span tag from taking the style for span tags. But you can not select children this way.
Just apply a style to the div and overwride the properties for the children.
.price {
color: blue;
}
span.originally {
color: green;
}
span.you-save {
color: red;
}
<article>
<div class="price">$64 used
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
</article>