CSS Selector to get the immediate text

Question

I have the following html fragment.

<p class="price">
    £5022.2
    <span class="sub-price tax-price">(£126.68nbsp;incl VAT)</span>
</p>

Is there a way to just target the £5022.2 from the above html fragment ?

If i target the class price and the text it targets the text that is a part of the span tag too

Answer 1

You can by adapting any other child in .price:

.price {
  color: red;
}
.price > * {
  color: black;
}

<p class="price">
    £5022.2
    <span class="sub-price tax-price">(£126.68nbsp;incl VAT)</span>
</p>

Answer 2

I think the solution to your problem is below.

You should wrap the number with another span and then you can solve this.

<p class="price">
    <span class="num">£5022.2</span>
    <span class="sub-price tax-price">(£126.68nbsp;incl VAT)</span>
</p>


.price >.num{
 /*styles goes here*/
}