Css first:child

Programiranje
1

Pozdrav,

znaci imamo nesto tipa:

<div id='box'>
        <div>uljez</div>
	<div class='myItem'>a</div>
	<div class='myItem'>b</div>
	<div class='myItem'>c</div>
	<div id='someOtherBox'>
		<div class='myItem'>d</div>
		<div class='myItem'>e</div>
		<div class='myItem'>f</div>
	</div>
</div>

e sad, kako dohvatiti samo prvi .myItem unutar #box-a ??

Ako probam:
#box .myItem:first-child {} …onda dohvatim i prvoga unutar #someOtherBox (a ako postoji uljez, pravi prvi niti neće biti dohvaćen)

A ako probam:
#box > .myItem:first-child {} …onda radi samo ako nema diva uljez?

evo primjera i ovdje: Edit fiddle - JSFiddle - Code Playground

2

#box > .myItem:nth-child(2) { background-color: red; }

3

Da, ali što ako želimo dohvatiti prvu pojavku .myItema bez obzira što neznamo dali se neki element pojavljuje ispred njega ili ne?

4

To nazalost za sada nije moguce, no radi se na tome.

Za sada, jedina opcija koja ukljucuje samo css je ovako nesto:
http://jsfiddle.net/999qjxhj/13/

5

To je već određena logika,… previše za css.

Možeš obuhvatiti myItem clase nekim wrapp divom, tako da uljez ostane izvan, pa onda ići sa first-child.
Ali onda je bolje to nekako sa js riješiti.

6

Pa sve što radi CSS je određena logika…a ova nije ništa specijalnija od recimo postojećeg :first-child :slight_smile:

Hmm, nice. Jel bi ti se dalo dati kratko objašnjenje te sintakse?? Neznam značenje ovoga: ~ *

7

.myItem ~ * Prijevod: Svi elementi bilo kojeg tipa ( * ) nakon elementa sa klasom myItem ( .myItem )

P. S. Sad kad razmislim, dovoljno ti je ovo:
.myItem ~ .myItem, ne trebas ciljati sve elemente sa *

8

Jao mene…ja samo gledao sintaksu ~ * (pretpostavio da u vitičastim dodjeljueš crveni background…a ne da ga poništavaš s transparent xd)

…onda nakon tvog objašnjenja mi još manje sve imalo smisla xd.

Sad sam tek vidio što si napravio. …to je ipak malo manje elegantno nego sam na prvu pomislio, jer onda imamo problem što nemamo uvijek priliku tako poništiti neko svojstvo. Jer što ako su svojstva već negdje definirana…a mi želimo promjeniti samo prvoga? (ostale nebi mogli vratiti u stanje u kojem su bili, jer nam je izvorno stanje nepoznato)

Dali bi se moglo izvesti nešto možda u ovom smislu: (ovo dolje ne radi, ali možda tako nešto??)

#box > .myItem:not(~ .myItem )
{
background-color:red;
}

9

Da, nazalost je ponistavanje jedini nacin za sada.

:not() kao argument prima samo jednostavne selektore (tip, klasa, id) tako da na zalost nece raditi sa ~

10

Baš malo gledam kakvih sve pseudo classa ima…i ima skoro ono što treba :smile:
.myItem:nth-of-type(1)

…samo ovaj vrag gleda prvi type elementa, gdje je type: “div, p, span…” …tako da će raditi po zamišljenom samo ako uljez nije istog tipa kao targetirani element.

http://jsfiddle.net/999qjxhj/15/

11

Da, ako mozes garantirati da ce ti “uljezi” biti drugacijeg tipa, onda mozes tako.