[css] Directe class aanroep minder belangrijk

[chielsen]

Ik heb een simpel tabelletje met rijen en velden. Dat ziet er zo uit:

HTML:

<table width="700" cellpadding="4" class="tableBody" cellspacing="0">   
     <tr class="in">
        <td class="period">2</td>

        <td>in</td>
        <td>255.87</td>
    </tr>
     <tr class="vat">
        <td class="period">2</td>
        <td>vat</td>
        <td>20.87</td>

    </tr>
</table>

Nu is het probleem dat de meest linker velden in elke rij niet goed de stijl van de class period krijgen.
In class in en vat staat namelijk ook wat over de td velden. Dat ziet er zo uit:

Cascading Stylesheet:

.tableBody .in td
{
    color: #00B600;
}

.tableBody .vat td
{
    color: #FF1300;
}

.period
{
    color: black;
}

Nu wordt dus in de velden waar staat class=period de tekst niet zwart, maar een andere kleur.
Het is me wel geluk de .period het te laten overschrijven, dmv van .tableBody .vat .period
Maar aangezien ik meerdere classes heb, lijkt me het niet de bedoeling voor al die classes een extra .period te maken. Hoe kan ik ervoor zorgen dat die period belangrijker wordt dat iets van een parent voorschrijft?

[Verwijderd]

chielsen schreef op zaterdag 13 januari 2007 @ 16:30:
Hoe kan ik ervoor zorgen dat die period belangrijker wordt dat iets van een parent voorschrijft?

Door de regel die op .period slaat even specifiek of specifieker te maken dan de andere regels:

Cascading Stylesheet:

.tableBody .vat td.period
{
    color: black;
}

Een andere mogelijkheid is gebruik van de !important operator:

Cascading Stylesheet:

.period
{
    color: black !important;
}

Kijk hier voor meer info over specificity:
http://www.w3.org/TR/REC-CSS2/cascade.html#specificity

[chielsen]

Ah ja zoiets dacht ik dus al.
Dat voorbeeld dat jij als eerst geeft had ik ook al, maar dat zou ik dan voor alle rijen met verschillende classes moeten maken.

Bedankt iig, dacht bij !important altijd dat het juist minder belangrijk was (teveel in php bezig).

[Zoefff]

Het gebruik van !important wil ik je ten zeerste afraden. Het is nuttig als je aan het devven bent, maar in productie krijg ik er altijd enorme kriebel van.

Ik zou het toch proberen door wat specifieker te zijn. Volgens mij, maar dat weet ik niet zeker, zou het wel moeten werken als je dit doet zonder dat je alle verschillende rijen moet specificeren:

Cascading Stylesheet:

.tableBody tr td.period {
     color: black;
}

[chielsen]

Zoeff, dat werkt niet. tr is namelijk geen class en dus (als je die link die Blues gaf gebruikt) is b eentje minder. Waarom is !important gevaarlijk?
******************

Hmm werkt toch wel...??
Maar hoe zou ik nu in elke tabel (ook van niet class tableBody) dit kunnen gebruiken?

[ Voor 31% gewijzigd door chielsen op 13-01-2007 18:15 ]

[Zoefff]

Het gaat volgens mij om het aantal niveaus wat je specificeert, ".tableBody .vat td.period[/] is dus hetzelfde als ".tableBody tr td.period"

!important vind ik gevaarlijk omdat je er zeer bruut dingen doorheen perst. Bij een kleine website valt het misschien nog wel mee, maar met wat grotere CSS-files is de kans best groot dat je in een later stadium (of over 4 maanden) aanpassingen gaat doen die rare resultaten opleveren omdat je *ergens* een !important hebt gebruikt. Daarnaast overschrijf je met !important afaik ook eventuele custom-user instellingen bijvoorbeeld m.b.t. tekst-grootte of kleur.

Op het moment dat je een !important nodig hebt, kan je beter nog eens goed naar je CSS kijken of je een aantal dingen niet verkeerd aanpakt

Hmm werkt toch wel...??
Maar hoe zou ik nu in elke tabel (ook van niet class tableBody) dit kunnen gebruiken?

Nou, op dezelfde manier he:

Cascading Stylesheet:

table tr td.period {
    color: black;
}

[ Voor 12% gewijzigd door Zoefff op 13-01-2007 18:21 ]

[Voutloos]

Zoefff schreef op zaterdag 13 januari 2007 @ 18:20:
Daarnaast overschrijf je met !important afaik ook eventuele custom-user instellingen bijvoorbeeld m.b.t. tekst-grootte of kleur.

Afaik is dat oude CSS spec. en is inmiddels dit gedrag aangepast, zodat de user wel de baas is.

Maar goed, op botte wijze iets forceren vraagt idd gewoon om problemen.

[chielsen]

Zoefff schreef op zaterdag 13 januari 2007 @ 18:20:
Het gaat volgens mij om het aantal niveaus wat je specificeert, ".tableBody .vat td.period[/] is dus hetzelfde als ".tableBody tr td.period"

Nou, op dezelfde manier he:

Cascading Stylesheet:

table tr td.period {
    color: black;
}

Ja maar dat werkt dus net weer niet..