Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

CSS malo kompleksniji selektor ( da li je moguce )

[es] :: Web dizajn i CSS :: CSS malo kompleksniji selektor ( da li je moguce )

[ Pregleda: 2139 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

hari89
Student
BiH

Član broj: 211345
Poruke: 14
92.36.142.*



+1 Profil

icon CSS malo kompleksniji selektor ( da li je moguce )18.03.2014. u 13:00 - pre 122 meseci
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
 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
*.dynamic.isp.telekom.rs.



+38 Profil

icon Re: CSS malo kompleksniji selektor ( da li je moguce )18.03.2014. u 13:35 - pre 122 meseci
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/
 
Odgovor na temu

hari89
Student
BiH

Član broj: 211345
Poruke: 14
92.36.142.*



+1 Profil

icon Re: CSS malo kompleksniji selektor ( da li je moguce )18.03.2014. u 14:18 - pre 122 meseci
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 :)..
 
Odgovor na temu

Zeberdee
Misel Tekinder
Freelance Web Designer/Front-End
Developer
Niš

Član broj: 177025
Poruke: 59

Sajt: www.behance.net/MiselTeki..


+4 Profil

icon Re: CSS malo kompleksniji selektor ( da li je moguce )26.03.2014. u 15:09 - pre 121 meseci
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 {}

 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
*.dynamic.isp.telekom.rs.



+38 Profil

icon Re: CSS malo kompleksniji selektor ( da li je moguce )26.03.2014. u 15:41 - pre 121 meseci
@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
 
Odgovor na temu

Zeberdee
Misel Tekinder
Freelance Web Designer/Front-End
Developer
Niš

Član broj: 177025
Poruke: 59

Sajt: www.behance.net/MiselTeki..


+4 Profil

icon Re: CSS malo kompleksniji selektor ( da li je moguce )26.03.2014. u 16:48 - pre 121 meseci
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/
 
Odgovor na temu

[es] :: Web dizajn i CSS :: CSS malo kompleksniji selektor ( da li je moguce )

[ Pregleda: 2139 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.