CSS malo kompleksniji selektor ( da li je uopste moguce )?

Pozdrav,

Potreban bi mi bio selektor koji ce radit sljedece:

<div class="wrapper">
   <div class="grupa-1"> Klasa: GRUPA 1  </div>
   <div class="grupa-1"> Klasa: GRUPA 1 </div>
   <div class="grupa-2"> Klasa: GRUPA 2  </div> // Zelim da selektor dohvati prvi element koji je klase grupa-2
   <div class="grupa-2"> Klasa: GRUPA 2  </div>
   <div class="grupa-2"> Klasa: GRUPA 2  </div>
   <div class="grupa-1"> Klasa: GRUPA 1 </div>
</div>

S’tim sto je bitno napomenuti kako prvi element klase grupa-2 nece uvijek biti na istoj poziciji tako da vas molim da ne bude prijedloga tipa:

.wrapper:nth-child(2){..} 

Hvala

   .wrapper  .grupa2:first-child

Ja mislim da je to ono sto ti treba.

Neće ići u ovom slučaju.

@Potta evo ti rješenje, ako želiš mogu i objasniti:

2 Likeova

Moguce.

Bilo sljedece na listi odgovora. :slight_smile:

Hvala ti puno. To je ono sto mi je trebalo… Naravno objasnjenje bi dobro doslo… Ja imam neko svoje koje sam skontao na osnovu ovog css code-a kojeg si ti napisao, ali u svakom slucaju volio bi da cujem tvoje :smile:

Sljedeći kod selektira sve p elemente s atributom class="grupa2"

p[class="grupa2"]
{
    border: 4px solid red;
} 

To se nadam da ti je bilo jasno kao dan. Dakle, on će postaviti border na svim elementima.

Ono što zatim želiš je “undo” tj poništiti sve što si napravio (u ovom slučaju postavio border) na svim elementima s atributom class="grupa2" osim na prvom, što u konačnici ti daje željeni rezultat - samo će prvi element imati zadani border.

p[class="grupa2"] ~ .grupa2 {
    border: none;
}

Možeš ti dodati još jednom ~ .grupa2 pa ćeš označiti prva dva elementa, pa možeš tako ići u nedogled ručno koliko god ti elemenata treba. Primjerice ovako:

p[class="grupa2"] ~ .grupa2 ~ .grupa2 {
    border: none;
}

Live demo:

Da, da … jasno je sve kao dan… Hvala na tako detaljnom objasnjenju…