[css] overriden properties, ander effect dan verwacht

[tombo_inc]

hey,

ik ben een beetje met css aan het prutsen. nu heb ik de volgende situatie.
ik heb een xhtml pagina met een parent div waarin zich een aantal divs bevinden met beschrijvingen (tekst dus) erin.
nu mag er maar 1 div binnen die parent div zichtbaar zijn. alle divs hebben een id. wat ik nu doe is standaard alle divs binnen die parent div op onzichtbaar zetten behalve de eerste (dmv een class). alle divs die zichtbaar moeten zijn krijgen de class .active.

Cascading Stylesheet:

#parentdiv div {
display: none;
}

.active {
display: block;
}

nu verdwijnen inderdaad alle divs, maar mijn eerste div wil zichzelf nu ook niet laten zien. mijn gevoel zegt dat het tweede css blok de eerste zou moeten overriden, maar dat doet ie dus niet.
om verder tussen de verschillende divs te switchen, dus zichtbaar/onzichtbaar maken, gebruik ik een javascript functie die aan de div die zichtbaar moet worden een class attribuut met de waarde active toevoegd, en bij alle overige divs het class attribuut verwijdert. helaas wil dit niet werken. het lijkt alsof de class gewoon genegeerd wordt. wat zie ik hier over het hoofd, of is het gewoon een tekort koming in de browser? zowel in IE als in FF doet dit probleem zich voor.

bedankt alvast.

[We Are Borg]

!important ?

[JHS]

Je tweede selectie is een stuk minder specifiek. Zie over specificity http://www.stuffandnonsen...css_specificity_wars.html , en dan vooral het volgende plaatje http://www.stuffandnonsen.../specificitywars-05v2.jpg . #parentdiv div heeft dus een specificity van 1,0,1 , en je .active een van 0,1,0 . De eerstgenoemde wint dus duidelijk .

Je kan dit oplossen door de specificity van je tweede selector te verhogen, bijvoorbeeld door div#parentdiv div.active te doen, wat een specificity van 1,1,2 oplevert .

[tombo_inc]

@we are borg
kijk daar hebben we wat aan:p dat ik daar niet aan gedacht heb. het werkt bedankt!

@JHS
bedankt voor de info. ik had al zo'n voorgevoel dat het met dit soort dingen te maken had.
maar aangezien ik zo min mogelijk code wil hebben ga ik voor de manier van "we are borg". ik snap ook goed dat het op jou manier kan maar dan ga je heel diep nesten met selectors etc. en die active class heb ik voor nog meer dingen nodig die niet in mijn parent div staan. als ik de active class nu heel important maak dan kan ik alles op mijn site dat zichtbaar moet zijn die class toewijzen. op jou manier zou ik dan dieper moeten gaan en per element weer dingen aan moeten geven. (lekker duidelijk verteld allemaal ). anywayz het werkt nu
als ik toch beter jou manier kan gebruiken dan hoor ik dat graag, maar de !important rule vond ik ook wel een goede oplossing .

bedankt iig voor de hulp.