Onverwacht CSS gedrag

zondag 16 mei 2010 21:12

Acties:

0 Henk 'm!

Topicstarter

Bij het ontwikkelen van een website liep ik tegen een probleem aan waar ik nog nooit mee te maken heb gehad. Het lijkt alsof classes op de één of andere manier ge-override worden door regels die explicieter beschreven zijn.

Ik heb de volgende HTML code geschreven:

HTML:

1
2
3

<div id="a">
<p class="alert">Tekst</p>
</div>

Nu gebruik ik de volgende CSS code, in deze exacte volgorde:

Cascading Stylesheet:

#a p {
    color: blue;
}

.alert {
    color: red;
}

De tekst is nu niet rood (zoals je zou verwachten), maar blauw. Alle browsers die ik getest hebben doen hetzelfde, maar ik vraag me sterk af waarom dat het geval is. Kan iemand me verklaren hoe dit kan? De handleidingen die ik geraadpleegt heb, reppen er met geen woord over.

zondag 16 mei 2010 21:14

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Html

#a p is specifieker dan enkel .alert en krijgt dus voorrang

Intentionally left blank

zondag 16 mei 2010 21:15

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Html

Meer specifieke regels gaan voor minder specifieke regels. .alert is heel algemeen, #a p heeft al twee zaken die aangeven waar je het over hebt. #a p krijgt dus preference boven .alert en daarom is de kleur blauw. Als je dat wil overriden zul je ofwel .alert specifieker moeten maken door er #a voor te zetten, ofwel je voegt een !important toe.

edit:

En toen was crisp me voor.

[ Voor 5% gewijzigd door NMe op 16-05-2010 21:15 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zondag 16 mei 2010 21:17

Acties:

0 Henk 'm!

mcdronkz

Topicstarter

Oké, weer iets geleerd dat ik nooit meer ga vergeten! Beiden bedankt.

Na wat onderzoek ben ik erachter gekomen dat er systeem bestaat waarmee de 'specificity' berekend wordt. Bij deze code is de tekst rood, terwijl je zou verwachten (na het lezen van bovenstaande posts) dat de tekst blauw zou zijn.

HTML:

<html>
    <head>
        <style type="text/css">
            div p {
                color: blue;
            }
            
            .alert {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="a">
            <p class="alert">Tekst</p>
        </div>
    </body>
</html>

Omdat '.alert' voor tien telt, en 'div p' voor twee, krijgt '.alert' voorrang.

[ Voor 82% gewijzigd door mcdronkz op 16-05-2010 21:31 ]

maandag 17 mei 2010 00:22

Acties:

0 Henk 'm!

pieturp

gaffa!

Hence: Cascading Style Sheets

... en etcetera en zo

maandag 17 mei 2010 00:28

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Html

pieturp schreef op maandag 17 mei 2010 @ 00:22:
Hence: Cascading Style Sheets

True, hoewel specificity slechts een onderdeel is van de cascade

Intentionally left blank

maandag 17 mei 2010 00:31

Acties:

0 Henk 'm!

Verwijderd

crisp schreef op maandag 17 mei 2010 @ 00:28:

True, hoewel specificity slechts een onderdeel is van de cascade

Precies. Het cascaden komt pas echt aan bod als je gaat werken met color schemes en dat soort dingen.

maandag 17 mei 2010 02:13

Acties:

0 Henk 'm!

pieturp

gaffa!

Verwijderd schreef op maandag 17 mei 2010 @ 00:31:
Het cascaden komt pas echt aan bod als je gaat werken met color schemes en dat soort dingen.

Dat volg ik even niet. Leg 'ns uit?

... en etcetera en zo

maandag 17 mei 2010 04:24

Acties:

0 Henk 'm!

teh_twisted

pieturp schreef op maandag 17 mei 2010 @ 02:13:
[...]

Dat volg ik even niet. Leg 'ns uit?

dat je dus bv. in #foo defined dat color:red is en in #foo .bar dat backgroundcolor:green is en in #foo .bar p je een border:1px solid black hebt.
Waardoor uiteindelijk dus:

code:

<html>
<head>
<style type="text/css">
#foo {color:red}
#foo .bar {background-color:green}
#foo .bar p {border: 1px solid black}
</style>
</head>
<body>
<div id="foo">
<div class="bar">
 <p>foobar</p>
</div></div>
</body>
</html>

"foobar" rooie tekst, groene achtergrond en zwarte lijn eromheen heeft. De style "cascade" dus naar beneden, zoals het idee is

EDIT

code:

<html>
<head>
<style type="text/css">
#foo {color:red}
#foo .bar {background-color:green}
#foo .bar p {border: 1px solid black}
#foo .blup p {font-weight: bold}
</style>
</head>
<body>
<div id="foo">
<div class="bar">
 <p>foobar</p>
</div>
<div class="blup bar">
 <p>fooblubbar</p>
</div>
</div>
</body>
</html>

Mischien wat duidelijker voor je:
Afbeeldingslocatie: http://twiz.leethax.org/~twisted/skitch/csstest.htm-20100517-042759.png

[ Voor 22% gewijzigd door teh_twisted op 17-05-2010 04:28 ]

Tyan S7025, 1x Xeon E5520, 32GB DDR3-1333 ECC/REG, GTX275 896MB, 2x Samsung SM 2243SN, Logitech Perf MX. Laptop: MBP 10,1/6,2. Cams: Canon EOS600D+Tamron AF18-200, Sony W350. Gadgets: iPad 64GB 3G, iPhone 5 64GB, PS1-3. Auto: W211 E220CDI

maandag 17 mei 2010 09:09

Acties:

0 Henk 'm!

Verwijderd

Chris Coyier heeft er onlangs nog wat over geschreven: css-tricks.com

maandag 17 mei 2010 16:52

Acties:

0 Henk 'm!

pieturp

gaffa!

teh_twisted schreef op maandag 17 mei 2010 @ 04:24:
[...]

dat je dus bv. in #foo defined dat color:red is en in #foo .bar dat backgroundcolor:green is en in #foo .bar p je een border:1px solid black hebt.

Ja, nogal wiedes. Dat bedoel ik dus ook. Mijn vraag is waarom 't volgens Cheatah specifiek te maken heeft met color schemes. 't Maakt namelijk niet uit of het om kleuren, marges, positie of wat-dan-ook gaat.

[ Voor 4% gewijzigd door pieturp op 17-05-2010 16:52 ]

... en etcetera en zo

dinsdag 18 mei 2010 17:26

Acties:

0 Henk 'm!

geert1

In het voorbeeld waarmee het topic begon is de crux uiteindelijk dat de ene regel een id bevat en de andere een class. ID's hebben van zichzelf een erg hoge specificiteit. Goed weten hoe specificiteit werkt scheelt je typen en maakt css makkelijker, maar het kan gemakkelijk tegen je werken als je je selectors onhandig opbouwt (te specifiek of juist te algemeen). Veel front-end coders vinden hun eigen weg hier uiteindelijk in.

Onderwerpen