[CSS] rules overriden

[Mei]

Ik heb dit:

Cascading Stylesheet:

ul
{
color:red;
}
ul.lijstje
{
color:green;
}

(code versimpeld om het even te illustreren)

Dan krijg ul.lijstje alsnog een rode tekstkleur, ondanks dat de rule voor de groene kleur _na_ de andere rule komt. Kijk je met de Webdeveloper Toolbar welke styles er op ul.lijstje toegepast worden (ctrl+shift+Y en klikken op het element), dan staat de rule voor ul.lijstje bovenaan met daaronder de ul-rule. De regelnummers geven wel aan dat ze daar niet in de zelfde volgorde als in het css bestand staan. Wat is de logica hierachter? Het zal waarschijnlijk wel in de CSS specs staan, maar om nou al die pagina's door te lopen... Dan ben ik dagen bezig. Het zou mooi zijn als iemand hier even een korte uitleg kan geven

[hevling]

Hopelijk ben je er iets mee ...
Google: eerste link

[Duroth]

Mei schreef op zaterdag 18 augustus 2007 @ 21:42:
...
(code versimpeld om het even te illustreren)
...

Helaas werkt de versimpelde code wel. Als je even (een deel van) de originele code post, misschien dat ik er dan wel een antwoord op heb.

[Verwijderd]

http://www.w3.org/TR/CSS21/cascade.html#cascade

behandelt de manier waarop selectors werken. In het kort:

1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question.
2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precendence:
1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations
3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

de volgorde is dus het minst belangrijk, maar zonder meer code wordt het niet duidelijker. In je voorbeeld zou de tweede regel de eerste overrulen vanwege een hogere specificity (11 tegen 1), niet vanwege de volgorde

[Mei]

Cascading Stylesheet:

#content ul, #content ol
{
    margin-left:2em;
}
.tabs
{
    margin-left:0;
}

.tabs is een <ul> en zit in #content. Ik denk dat dit een selector specificity probleempje is, klopt dat?

[crisp]

Mei schreef op zaterdag 18 augustus 2007 @ 22:26:
[...]
Ik denk dat dit een selector specificity probleempje is, klopt dat?

Dat klopt, #content ul is specifieker dan .tabs

[Verwijderd]

oplossing is van de tweede selector dus #content ul.tabs te maken, zodat ie zelf weer specifieker is