How to choose specific element

Hi!

In this code I want to select the first <p> in both, but with different color.
In the one with class:"schedule-item ice-spice" I want the first <p> to be blue, in the second, with class="schedule-item performance" I want the first <p> to be red.

I've lost my ways. I want to avoid using :has()since I know many will use an older phone. When I use p:first-child the entire schedule-item changes color, and not just the first <p>.

A bit lost now ...

<div class="schedule">
          <div class="schedule-item ice-spice">
            <p>Ice Spice</p>
            <span>07:00 – 08:30</span>
            <h4>Sauna</h4>
            <p>Sukkerbiten</p>
          </div>
        </div>

<div class="schedule">
          <div class="schedule-item performance">
            <p>Performance</p>
            <span>16:00 – 17:20</span>
            <h4>Harald Beharie</h4>
            <h5>Batty Bwoy</h5>
            <p>Dansens Hus</p>
            <span class="bus">
                <p>17:25 – Bus to Aviaja Dance, SILA</p>
            </span>
          </div>
        </div>
Was this page helpful?