3 replies

How to choose specific element

Hi!

In this code I want to select the first

<p>

<p>

in both, but with different color.
In the one with

class:"schedule-item ice-spice"

class:"schedule-item ice-spice"

I want the first

<p>

<p>

to be blue, in the second, with

class="schedule-item performance"

class="schedule-item performance"

I want the first

<p>

<p>

to be red.

I've lost my ways. I want to avoid using

:has()

:has()

since I know many will use an older phone. When I use

p:first-child

p:first-child

the entire

schedule-item

schedule-item

changes color, and not just the first

<p>

<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>

How to choose specific element

Hi!

In this code I want to select the first

<p>

<p>

in both, but with different color.
In the one with

class:"schedule-item ice-spice"

class:"schedule-item ice-spice"

I want the first

<p>

<p>

to be blue, in the second, with

class="schedule-item performance"

class="schedule-item performance"

I want the first

<p>

<p>

to be red.

I've lost my ways. I want to avoid using

:has()

:has()

since I know many will use an older phone. When I use

p:first-child

p:first-child

the entire

schedule-item

schedule-item

changes color, and not just the first

<p>

<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>

How to choose specific element

Similar Threads

How to choose specific element

Similar Threads

Similar Threads

Similar Threads