Förhindra arv av CSS

Det finns ingen CSS-egenskap eller liknande du kan specificera för att arvet ej skall gälla. Med CSS2 skulle du kunna göra såhär (stöds ej av IE6) för att förhindra att texten i paragrafen får blå färg:

div{
    color: blue;
}
div > *{
    color: black;
}

<div>
div
<p>paragraf</p>
</div>

I CSS2-referensen kan du läsa om varje egenskap huruvida de ärvs eller ej.

:)

Nu är jag där igen. Jag förstår uppenbarligen inte riktigt detta. Jag har en tabell vars enda funktion är att osynligt strukturera en sida i några olika fält. Klasserna ser ut enligt följande:

#mainTable {
	width:100%;
	height:100%;
	border:0;
	border-collapse:collapse;
}
#mainTable td {
	padding:0;
	vertical-align:top;
}

På samma sida har jag en tabell innehållande ett formulär, och denna tabell ligger inuti en av "mainTable"-cellerna. Klasserna för formulärtabellen ser ut enligt följande:

.formTable {
	border:0;
	border-collapse:collapse;
}
.formTable td {
	padding:5px 0;
}

Resultatet blir att paddingen i "formTable td" tas bort av pappa-klassen mainTable. Hur undviker jag detta?

Har du möjlighet att använda id istället för class när det gäller "formTable"? En id-selektor räknas nämligen som mer betydande än en class-selektor, och därför ignoreras .formTable td.

Genom att ändra det till

#formTable {
	border:0;
	border-collapse:collapse;
}
#formTable td {
	padding:5px 0;
}

och samtidigt ändra class="formTable" till id="formTable" ska det lösa sig.

I det här fallet kan jag faktiskt använda id istället, men hur hade det gått om jag ville ha flera "formTable" på en sida?

Du behöver inte alls ändra till id, kom jag på.

Utveckla bara selektorn till

#mainTable .formTable {
	border:0;
	border-collapse:collapse;
}
#mainTable .formTable td {
	padding:5px 0;
}

så får du med en id-selektor.

CSS verkar väldigt osmidigt i mina ögon just nu. ;) Jag har ett standard-style sheet med grundläggande formatering som jag använder för i stort sett alla webbplatser jag gör. Om jag då råkar koda en design där diverse element innesluts av andra så keckar allt ihop till bajs om jag inte går in och lägger till det omslutande elementets id framför alla mina klasser.

Vilket meck säger jag.

Tja, det vill ju till att man har en genomtänkt struktur för sin kod när man kör med CSS och att man försöker lägga sidspecifika CSS-hack i egna filer så långt det går förståss - annars blir det lätt ostrukturerat och "meckigt" som du säger - fast jag undrar ändå om inte meckandet med "hederliga gamla meganästlade tabeller" ändå oftast är betydligt värre att hantera i längden eftersom koden där så lätt alldeles för snabbt blir så oöverskådlig ;)

Hävdar
/Jarvklo, som hellre meckar med CSS än med multipla nästlade tabeller om det går att lösa på det sättet :birp

Och BTW - genom att utnyttja att

class="..."

kan användas för flera klasser samtidigt (genom att ange dem med mellanslag emellan), så kanske du kan komma på ett sätt att ta dig förbi problemet genom att sluta använda id i de omslutande taggarna och sedan köra med - typ -

<div class="layout utseende">

eller liknande...