How can i make 'NEW' labels within <h2> tags to red using CSS

I needed to make label only 'NEW' in h2 tag to have color #fa9f42. When i am running this code, color code #fa9f42 is getting assigned to these text "NEW", "Cucumber", "NAAN". Is there any way to assign above color code only to 'NEW' by changing code only in CSS. If yes then how can i do. Please help me.

Below is my html coed

<body>
<div class="center-text">
    <h1>Our Menu</h1>
    <h2>Idli <span>NEW</span></h2>
    <div id="child"><p>Sambhar Idli, Vada Idli.</p></div>
    <h2>Pasta Salad <span>Cucumber</span></h2>
    <div id="child"><p>Pasta, vegetables, mozzarella.</p></div>
    <h2>Fried Calamari <span>Kulcha</span></h2>
    <div id="child"><p>Squid, buttermilk. <span>NAAN</span></p></div>
</div>
</body>

I tried below code in CSS. But it is getting applied to these text "Cucumber", "NAAN" as well which i do not want. I am expecting to change the color of 'NEW' only

.center-text h2 span {
background-image: linear-gradient(to left, #fa9f42,  #fa9f42);
-webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;    
}

Solution

With the actual code you've posted, you could do it just with CSS like this:

.center-text h1 + h2 span {

Demo:

.center-text h1 + h2 span {
background-image: linear-gradient(to left, #fa9f42,  #fa9f42);
-webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;    
}

<div class="center-text">
  <h1>Our Menu</h1>
  <h2>Idli <span>NEW</span></h2>
  <div id="child"><p>Sambhar Idli, Vada Idli.</p></div>
  <h2>Pasta Salad <span>Cucumber</span></h2>
  <div id="child"><p>Pasta, vegetables, mozzarella.</p></div>
  <h2>Fried Calamari <span>Kulcha</span></h2>
  <div id="child"><p>Squid, buttermilk. <span>NAAN</span></p></div>
</div>

Obviously this won't be very useful if the HTML order of things changes, so it would be better if you could add a class to the HTML and target that instead.