KPC
Kevin Powell - Community•2y ago
Å Marlon G

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>
<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>
2 Replies
Srđan
Srđan•2y ago
Well, you just target it like this: .ice-spice p:first-child { color: blue; } .performance p:first-child { color: red; }
Å Marlon G
Å Marlon GOP•2y ago
💩 to me ... I red the MDN docs, and got totally confused ... I thought I had to do p:first-child before doing anything ... But hey! That's why this is the greatest Discord. Thank you so much! :thumbup:

Did you find this page helpful?