[CSS] Classes includen vanuit andere class

[Tubby]

Ik was aan het opzoeken hoe je meerdere classes aan 1 html element kan toekennen en toen kwam ik langs het volgende (interessante) stukje css.
http://weblogs.asp.net/asmith/archive/2004/02/02/66360.aspx

Cascading Stylesheet:

.foo 
{ 
include: .bar; 
border: 1px solid black; 
} 
.bar 
{ 
background: red; 
color: green; 
} 

let op de include

HTML:

<div class=foo>test</div>

dit zou dus volgens het voorbeeld een blok met rode achtergrond moeten geven. (class foo include ook alle properties van bar)

Ik heb het nu al in verschillende testcasejes werkend proberen te krijgen, maar hij werkt niet zoals ze daar zeggen dat ie zou moeten werken. Het gekke is dat ik hiervan ook niets kan terug vinden in de css of css2 reference van w3. Ook hier op GoT kan ik niets vinden hierover.

is dit voorbeeld nou complete bs of zie ik iets over het hoofd? want het principe zou best ideaal zijn

[ Voor 3% gewijzigd door Tubby op 05-01-2006 16:48 ]

[Verwijderd]

Misschien eerst bar definieren? D.w.z. de volgorde omdraaien?

[Tubby]

Verwijderd schreef op donderdag 05 januari 2006 @ 16:49:
Misschien eerst bar definieren? D.w.z. de volgorde omdraaien?

tried that
ben bang dat het gewoon bs is aangezien ik er niets van op w3 kan terug vinden

[ Voor 18% gewijzigd door Tubby op 05-01-2006 16:50 ]

[Sappie]

Je hebt denk ik niet helemaal goed gelezen op die site

De gozer die die CSS post vraagt zich namelijk af of dit zou werken en dit is inderdaad niet het geval:

I knew you could do that, what I wanna know is how you can nest a reference to one class inside another.

code:

.foo
{
include: .bar;
border: 1px solid black;
}
.bar
{
background: red;
color: green;
}
class=”foo” (includes bar)

Meerdere classen aan een element koppelen doe je zoals ook op die pagina beschreven staat, namelijk door gewoon de twee classen allebei in het class attribuut te vernoemen

bovendien, mocht die methode wel werken, dan zouden ze bij W3c ook niet helemaal helder zijn geweest. Dit kan namelijk eenvoudiger..

code:

.foo { 
  border: 1px solid black; 
} 

.bar, .foo { 
  background: red; 
  color: green; 
}

[ Voor 25% gewijzigd door Sappie op 05-01-2006 16:58 ]

[Tubby]

Sappie schreef op donderdag 05 januari 2006 @ 16:54:
Je hebt denk ik niet helemaal goed gelezen op die site

De gozer die die CSS post vraagt zich namelijk af of dit zou werken en dit is inderdaad niet het geval:

[...]

Meerdere classen aan een element koppelen doe je zoals ook op die pagina beschreven staat, namelijk door gewoon de twee classen allebei in het class attribuut te vernoemen

bovendien, mocht die methode wel werken, dan zouden ze bij W3c ook niet helemaal helder zijn geweest. Dit kan namelijk eenvoudiger..

jah, zoals:

HTML:

<div class=foo bar>test</div>

magoed, wel jammer, was ook te mooi om waar te zijn

[Sappie]

Tubby schreef op donderdag 05 januari 2006 @ 17:02:
[...]

jah, zoals:

HTML:

<div class=foo bar>test</div>

magoed, wel jammer, was ook te mooi om waar te zijn

Wel even quotes eromheen dan he maar eh, het zou zoals ik in mijn post ook al stelde, behoorlijk nutteloos zijn

[Tubby]

Sappie schreef op donderdag 05 januari 2006 @ 17:03:
[...]

Wel even quotes eromheen dan he maar eh, het zou zoals ik in mijn post ook al stelde, behoorlijk nutteloos zijn

mja, quotes komen er niet zo mooi uit in dat blokje maar je hebt gelijk

maar nutteloos is het niet had het vanmiddag namelijk nodig

[Sappie]

Leg het nut er eens van uit dan? Wat zou het voordeel zijn wanneer een soortgelijke constructie mogelijk zou zijn.

[Tubby]

Sappie schreef op donderdag 05 januari 2006 @ 17:15:
Leg het nut er eens van uit dan? Wat zou het voordeel zijn wanneer een soortgelijke constructie mogelijk zou zijn.

Een grid waarbij de textkleur van de rijen veranderd aan de hand van de status van die rij.
En die kleuren zijn vervolgens applicatie instellingen.

Bovenin je page genereer je classes op basis van je applicatie kleur instellingen voor de statussen, en je hebt een class in je stylesheet waarin je het standaard font/padding van het grid gedefineerd.

Per row in het grid heb je vervolgens een standaard class + de class van de status kleur.

Ik hoop dat het een beetje begrijpelijk is, anders moet ik wat code plakken

[UltimateB]

Mja, maar dus ook makkelijk te doen door een soort van parent classe die de generieke instellingen voor beide classes heeft, en dan de extra kleuren in die children aangeven. Niet eens meer tikwerk of code dan.

[Sappie]

Misschien zou je wat code moeten plakken Ik zie namelijk niet in waarom je dit niet op kan lossen met meerdere classes in een class attribuut.

[ Voor 55% gewijzigd door Sappie op 05-01-2006 17:53 ]

[JHS]

UltimateB:

HTML:

<p>Beetje tekst.</p>
<p class="manual">Handleiding tekst</p>
<p class="ietsanders">Aangezien er een totaal andere class tussen zit,
  kan je het niet met een div oplossen.</p>
<p class="manual important">Hele belangrijke handleiding tekst</p>
<p class="important">Gewone belangrijke tekst</p>

Cascading Stylesheet:

p.manual {
  background-color: grey;
}

p.important {
  color: red;
}

p.ietsanders {
  background-color: lime; 
  color: purple;
}

En hoe wilde je dit doen, zonder code te pasten, en zonder meerdere classes aan één element te hangen ?

[ Voor 27% gewijzigd door JHS op 05-01-2006 17:46 ]

[UltimateB]

Kan .ietsanders ook .important zijn?

[wizzkizz]

JHS schreef op donderdag 05 januari 2006 @ 17:45:
UltimateB:

HTML:

<p>Beetje tekst.</p>
<p class="manual">Handleiding tekst</p>
<p class="ietsanders">Aangezien er een totaal andere class tussen zit,
  kan je het niet met een div oplossen.</p>
<p class="manual important">Hele belangrijke handleiding tekst</p>
<p class="important">Gewone belangrijke tekst</p>

Cascading Stylesheet:

p.manual {
  background-color: grey;
}

p.important {
  color: red;
}

p.ietsanders {
  background-color: lime; 
  color: purple;
}

En hoe wilde je dit doen, zonder code te pasten, en zonder meerdere classes aan één element te hangen ?

zo

Cascading Stylesheet:

p.manual, p.important_manual {
  background-color: grey;
}

p.important, p.important_manual  {
  color: red;
}

p.ietsanders {
  background-color: lime; 
  color: purple;
}

en je important manal-paragraaf de class important_manual geven?

[Tubby]

Deze css class is altijd hetzelfde en zal dus in een style sheet zitten.

Cascading Stylesheet:

.Grid 
{
  font-size:10px;
  padding-left:2px;
}

Deze css classes zijn gebaseerd op waarden die in de applicatie ingesteld kan worden (systeem beheerder kan kleurtjes kiezen voor bepaalde statussen). De applicatie genereerd op basis van die instellingen een style tag in de header van de pagina met globaal de volgende class definities

Cascading Stylesheet:

.red
{
 color: rgb(255,0,0);
}
.blue
{
 color: rgb(0,0,255);
}

Vervolgens wordt er bij het genereren van de tabel per row gekeken wat de status van die row is. Aan de hand daarvan wordt er vervolgens de class red of blue gekozen. Maar je wil ook altijd de grid class van de td erbij hebben.

HTML:

<table>
<tr>
<td class=grid red>rij1 status rood</td>
</tr>
<tr>
<td class=grid blue>rij2 status blauw</td>
</tr>
</table>

[ Voor 7% gewijzigd door Tubby op 05-01-2006 19:58 ]

[JHS]

UltimateB: Ja, natuurlijk, net als .nogietsanders

wizzkizz: Vanwege bovenstaande moet je dan voor álles waar je important bij wil gebruiken .classname-important toe gaan voegen aan je CSS, én class="classname-important". In plaats van alleen class="classname important" in je HTML .

[UltimateB]

How about:

een <span class="important"> oid erbij als het belangrijk is?

[JHS]

UltimateB: Dan is een extra class toch véél makkelijker . Waarom zou je semantiekloze elementen willen toevoegen, terwijl dit een véél betere oplossing is . Ook met die span heb je veel meer typewerk. Het ging er alleen maar om om aan te tonen dat het nuttig is. Nu kan je het vast ook op andere manieren realiseren, maar dit is gewoon veel makkelijker, en DOMtechnisch ook beter. Bovendien, stel dat ik het een blocklevel element wil laten zijn...

[ Voor 33% gewijzigd door JHS op 05-01-2006 21:17 ]

[wizzkizz]

JHS schreef op donderdag 05 januari 2006 @ 21:16:
UltimateB: Dan is een extra class toch véél makkelijker . Waarom zou je semantiekloze elementen willen toevoegen, terwijl dit een véél betere oplossing is . Ook met die span heb je veel meer typewerk. Het ging er alleen maar om om aan te tonen dat het nuttig is. Nu kan je het vast ook op andere manieren realiseren, maar dit is gewoon veel makkelijker, en DOMtechnisch ook beter. Bovendien, stel dat ik het een blocklevel element wil laten zijn...

het kan wel anders , maar met een extra class is idd een stuk makkelijker

[Tubby]

UltimateB schreef op donderdag 05 januari 2006 @ 20:59:
How about:

een <span class="important"> oid erbij als het belangrijk is?

Dat was mijn vorige oplossing, maar deze vind ik overzichtelijker.

[Sappie]

Volgens mij hebben we elkaar in 2e instantie een beetje verkeerd begrepen want ik bedoelde wat jij in je vorige post heb gepost