Archief - nested divs

ok,
het geven van stijlen aan nested divs zorgt voor mij altijd voor problemen.
Vaak kom ik tot redelik wat geneste divs, kan soms niet anders, door jquery stuff etc.
dit terzijde.
ik versta niet goed wanneer het wel en wanneer het niet werkt.
bv

ik heb nu dit: uiteraard afgesloten enzo. dit is maar om eens te tonen.


als ik nu mijn productblocks in mijn css wil plooien.
.productblocks{float:left; width:250px; etc...}
komt dat er maar niet.. ook firebug geeft niets van deze classes.
moet ik iets doen als #slider.scroll.scrollContainer.panel.productblocks {} ? lijkt mij ook zo spastisch. Iemand hier wat meer info over?

(mind the spaces!)

als ge zegt :


dan gaat ge die scroll class enkel kunnen gebruiken op een element met id "slider". die scrollcontainer gaat ge enkel kunnen gebruiken op het betreffende emelent met id "#slider" als het element met id "slider" een class "scroll" heeft.


Scrollcontainer kunt ge hier dan weer maar enkel gebruiken op een element in de container van #slider.scroll ( dus een element met id "slider" dat ook de class "scroll" heeft )

Wilt ge in de diepte gaan ( dus het nesten van elementen ) moet ge het gewoon scheiden door spaties


Hierbij zal ".scrollcontainer" enkel werken in een element class "scroll" dat in een element met id "slider" zit.

voor uw voorbeeld zie ik dit wel werken :


Al is dat nesten allemaal niet nodig.. Da moet ge enkel doen als er bovenstaande elementen andere properties zouden hebben en ge die moet overschrijven. Unieke id's hebben ook voorrang op classes dacht ik

Ik lees hier graag reacties en verbetering op, want heb er int verleden ook al veel last mee gehad.
Ik probeer nu meestal gewoon zo specifiek mogelijk te zijn:

bvb:

&

Niet echt 100% relevant, maar vergeet niet dat ge door middel van JQuery nieuwe elementen kunt toevoegen aan de DOM. Dus als ge voor uw non-javascript gedeelte maar 2 divs nodig hebt dan kunt ge de andere 15 gerust met JQuery er rond zetten.

merci adrian voor uw uitgebreide uitleg, ik zal het eens met die spaties proberen +rep

adrianhates zei:

(mind the spaces!)

als ge zegt :

Code:

#slider.scroll.scrollcontainer{
 props: props
}

dan gaat ge die scroll class enkel kunnen gebruiken op een element met id "slider". die scrollcontainer gaat ge enkel kunnen gebruiken op het betreffende emelent met id "#slider" als het element met id "slider" een class "scroll" heeft.

Klik om te vergroten...

Of simpeler gezegd, als ge alles achter elkaar zet zonder spaties, dan selecteer je in dit geval het element met het id slider dat ook de class scroll en scrollcontainer heeft.
Zo iets dus:

Eleven zei:

Of simpeler gezegd, als ge alles achter elkaar zet zonder spaties, dan selecteer je in dit geval het element met het id slider dat ook de class scroll en scrollcontainer heeft.
Zo iets dus:

Code:

<div id="slider" class="scroll scrollcontainer">content</div>

Klik om te vergroten...

inderdaad! Ja ik had het er zelf soms moeilijk mee