Permalänk

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!

Permalänk
Medlem

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.

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Permalänk

Tack så mycket för svaret och artiklarna!

Permalänk
Medlem

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;
}

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
99:e percentilen
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.

Visa signatur

Skrivet med hjälp av Better SweClockers