Trädvy Permalänk
Medlem
Registrerad
Sep 2012

HTML & CSS regelfråga

<html> <head> <style type="text/css"> body{color:green;} h1 p{color:yellow;} p{color: red;} h1{color: blue;} </style> </head> <body><h1><p>Tentamen </p></h1></body> </html>

Varför blir den här texten gul och inte röd?
Vad är det för regel som gäller här?

Tacksam för svar!

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Aug 2010

Regeln h1 p är mer specifik än någon annan matchande regel i dokumentet, och är alltså den som används.

Det finns en artikel på MDN som översiktligt går igenom hur specificitet fungerar. En längre artikel om specificitet finns på Smashing Magazine.

Du får gärna citera eller nämna mig (@ToJa92) om du svarar på något jag skrivit.

Trädvy Permalänk
Medlem
Registrerad
Sep 2012

Tack så mycket för svaret och artiklarna!

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

h1 p = yellow = alla paragrafer innanför en h1 tag blir gul
<h1><p>texten blir gul</p></h1>
<h1>Men denna är blå, för texten är inte innanför en paragraf</h1>

h1, p =yellow = både h1 och p kommer bli gul
Notera att när du skiljer med kommatecken så betyder det "och", du kan därför välja flera taggar eller klasser som ska använda attributen, tex:

p, h3, h4, .enClass {
/*alla dessa elements text kommer vara röda och ha storlek 11em.*/
color: red;
font-size: 11em;
}

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011
Skrivet av cherrywhisper:

<html>
<head>
<style type="text/css">
body{color:green;}
h1 p{color:yellow;}
p{color: red;}
h1{color: blue;}
</style>
</head>
<body><h1><p>Tentamen
</p></h1></body>
</html>

Varför blir den här texten gul och inte röd?
Vad är det för regel som gäller här?

Tacksam för svar!

@ToJa92 svar är mycket bra. Kan tillägga att du bör sträva efter att arbeta med – inte mot – specificiteten så ofta du kan, annars blir det jättejobbigt att skriva maintainable kod.

Kan också tillägga att <h1><p></p></h1> inte är tillåten HTML5. Validera gärna din kod och sätt den gärna inom [code]-taggar när du postar den här. Och glöm inte <!DOCTYPE html> högst upp i dokumentet!

Skrivet av Florrpan:

h1 p = yellow = alla paragrafer innanför en h1 tag blir gul

<h1><p>texten blir gul</p></h1> <h1>Men denna är blå, för texten är inte innanför en paragraf</h1>

h1, p =yellow = både h1 och p kommer bli gul
Notera att när du skiljer med kommatecken så betyder det "och", du kan därför välja flera taggar eller klasser som ska använda attributen, tex:

p, h3, h4, .enClass { /*alla dessa elements text kommer vara röda och ha storlek 11em.*/ color: red; font-size: 11em; }

[code] och [cmd] är nice, som sagt. Om ni kör Better SweClockers finns det knappar för dem.

5930K • Corsair DP 32 GiB • EVGA GTX 980 • 2x Swift PG278Q
Better SweClockersDisplayPort över USB-C

Köp processor för framtiden™, men inte grafikkort.