CSS – hierarki

Bra att känna till när man jobbar med CSS är i vilken ordning inställningarna läses in.

Till att börja med så gäller att senast inlästa värdet, som du om anget width för en tagg två gånger så är det det senaste inlägget som gäller.
Exempel:

.minClass {
width: 100px;
}
.minClass {
width: 200px;
}

I exemplet kommer alltså objekten med classen ”.minClass” att få en width på 200px.

Värden på ID gäller alltid över CLASS. Dvs att om du anger ett värde för t ex width i både CLASS och ID för en div så är det värdet i ID defineringen som gäller, även om CLASS värdet angavs senare.
Exempel

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#minDiv {
width: 100px;
}
.minClass {
width: 200px;
}
</style>
</head>
<body>
<div id="minDiv" class="minClass">
<p>Jag är en test div</p>
</div>
</body>
</html>

I exemplet ovan så kommer diven ha en width på 100px, då det värdet gäller ovanför CLASS värden, även fast CLASS värdet angavs senare

En CLASS kan också defineras genom kedjade classer, objekt och ID-värden. I kort kan man säga att ju fler kedjelänkar desto högre relevans får ett tilldelat värde.


Exempel:


div.minClass {
width: 130px;
}

.minAndraClass {
width: 90px;
}

<div class="minClass minAndraClass">
<p class="minClass minAndraClass">Jag är en test div</p>
</div>

Width 130px ovanför tilldelas endast objekt med ".minClass" som är en div, och har högre värde än .minAndraClass då den endast tilldelas objekt oavsett "föräldrar"-objekt. Dvs att <div>-taggen blir 130px medan <p>-taggen blir 90px då den kommer hämta sitt värde från .minAndraClass som ej har krav på att objektet ska vara en <div>.

Blogginlägget är under uppbyggnad

Annonser

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s