CSS malo kompleksniji selektor ( da li je moguce )

CSS malo kompleksniji selektor ( da li je moguce ) 18.03.2014. u 14:00 · pre 153 meseca #1

Pozdrav,

Potreban bi mi bio selektor koji ce radit sljedece:

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

Re: CSS malo kompleksniji selektor ( da li je moguce ) 18.03.2014. u 14:35 · pre 153 meseca #2

Ako hoćeš isključivo CSS rešenje, jedina varijanta ti je da prvo dodeliš stil za sve elemente koji imaju tu klasu, pa da onda "poništiš" za sve osim prvog elementa.

Dakle ovako:

Code:

.wrapper > .grupa-2{
color: red;
}
.wrapper > .grupa-2 ~ .grupa-2{
color: black;
}

http://jsfiddle.net/MKjQ7/

1

Re: CSS malo kompleksniji selektor ( da li je moguce ) 18.03.2014. u 15:18 · pre 153 meseca #3

Citat:

deZio: Ako hoćeš isključivo CSS rešenje, jedina varijanta ti je da prvo dodeliš stil za sve elemente koji imaju tu klasu, pa da onda "poništiš" za sve osim prvog elementa.

Dakle ovako:

Code:

.wrapper > .grupa-2{
color: red;
}
.wrapper > .grupa-2 ~ .grupa-2{
color: black;
}

http://jsfiddle.net/MKjQ7/

Hvala, to je to :)..

Re: CSS malo kompleksniji selektor ( da li je moguce ) 26.03.2014. u 16:09 · pre 153 meseca #4

Mogao si i jednostavno da iskoristis first-child selektor, on bi ti bez obzira kako premestas elemente sa tom klasom konstantno da selektuje samo prvi element,
bez obzira da li taj element menja poziviju gore-dole ili zamenjuje sa nekim drugim:

Code:
.wrapper > .grupa-2:first-child {}

Potpis

http://www.behance.net/MiselTekinder

Re: CSS malo kompleksniji selektor ( da li je moguce ) 26.03.2014. u 16:41 · pre 153 meseca #5

@Zeberdee

Nisi u pravu. :first-child će selektovati samo prvi podelement klase wrapper. Dakle tvoj kod:

Code:
.wrapper > .grupa-2:first-child {}

će raditi samo ako prvi element unutar wrappera ima klasu grupa-2, a ako je klasa grupa-2 na bilo kojoj drugoj poziciji, neće je selektovati.

Pročitaj objašnjenje:
http://www.w3.org/TR/CSS21/selector.html#first-child

Re: CSS malo kompleksniji selektor ( da li je moguce ) 26.03.2014. u 17:48 · pre 153 meseca #6

U pravu si ... sad sam pogledao ...

Mada resenje za ovu istu stvar moze da se uradi i ovako ako ce ti svaka .grupa-2 klasa biti posle .grupa-1 klase:

Code:

.wrapper .grupa-1 + .grupa-2 {
color: green;
}

http://jsfiddle.net/rXPUv/

Potpis

http://www.behance.net/MiselTekinder

Forum kao aplikacija na telefonu

Srodne teme