Nested divs

[HunterP]

Besten,

Vraagje, even de code wat samengevat waar het om gaat :

<div class="first">
   <p>De main div<p>
      <div class="second">
         <p>De sub div<p>
            <div class="third">
               <p>De sub-sub div<p>
            </div>
      </div>
</div>

Misschien zijn er hele mooie namen voor, maar ik heb het even simpelweg main, sub en sub-sub genoemd

Het gaat erom dat er op elk niveau sprake is van links die ik alleen in het middelste niveau (second) anders wil behandelen.

Ook weer even een simpel stukje CSS, niet alles :

a:link
{
        color: #006;
        text-decoration: none;
}
.second a:link
{
        color: #00E;
        text-decoration: underline;
}

Normale links hebben de kleur #006, in het middelste niveau moeten ze de duidelijkere kleur #00E krijgen. Het probleem is class=third ook binnen second valt en dus meekleurt. Vervolgens moet er een extra stukje onder komen om third te "excluden" :

.third a:link
{
        color: #006;
}

Kan dit eenvoudiger, of is dit de enige oplossing? De HTML even buiten beschouwing gelaten, die is niet 1,2,3 aan te passen (gaat om een forum).;

 

[HunterP]

Nog geen antwoord helaas, dan even wat concreter. De CSS van een forum bevat voor het kleuren van links het volgende :

a:link
{
        color: #006;
        text-decoration: none;
}
a:visited
{
        color: #333;
        text-decoration: none;
}
a:hover
{
        color: #E00;
        text-decoration: underline;
}

Dat zijn hele simpele, ietwat droevige kleuren, waardoor een link in een posting niet lekker uit de verf komt, even testen hoe dat er op dit forum uit ziet :

http://www.testlink.nl

Dat is ook een aparte kleur, zo te zien. Een link is meestal toch knalblauw? In elk geval, een forum staat natuurlijk bol van de links (topics, postings, boards, gebruikers, etc...) die zeker niet allemaal blauw moeten worden omdat dat iets te kleurrijk wordt. Alleen links in een posting dienen blauw te worden, nadeel is echter dat een posting ook quotes/citaten kan bevatten waarboven een zogenaamde quoteheader staat die ook dezelfde kleur moet behouden als de overige links op het forum.

Ik heb dat getracht als zodanig op te lossen :

a:link
{
        color: #006;
        text-decoration: none;
}
a:visited
{
        color: #333;
        text-decoration: none;
}
a:hover
{
        color: #E00;
        text-decoration: underline;
}

.post a:link
{
        color: #00E;
        text-decoration: underline;
}
.post a:visited
{
        color: #909;
        text-decoration: underline;
}
.post a:hover
{
        color: #E00;
}

.quoteheader a:link
{
        color: #006;
        text-decoration: none;
}
.quoteheader a:visited
{
        color: #333;
        text-decoration: none;
}
.quoteheader a:hover
{
        color: #E00;
        text-decoration: underline;
}

Eerst de gewone links op #006, dan de links in de class .post #00E en vervolgens de class .quoteheader (child van .post) weer terug naar #006.

Ziet dit er goed uit of doe ik iets raars? Misschien lag het ergens anders aan, maar tijdens een korte test werden ineens alle links blauw (#00E), alsof .post a:link alles overrulede.

Groeten, Peter.

 

[csshunter]

Hoi peter,
in de originele opstelling:

a:link {
        color: #006;
        text-decoration: none;
}
.second a:link {
        color: #00E;
        text-decoration: underline;
}
.third a:link {
        color: #006;
}

... kan je het iets vereenvoudigen (maar niet veel want het blijven cascades!), tot:

a:link,
.third a:link {
        color: #006;
        text-decoration: none;
}
.second a:link {
        color: #00E;
        text-decoration: underline;
}

... als tenminste de derde serie ook zonder onderstreping moet. Anders kan je het wel anders opschrijven, maar kom je per saldo niet op minder regels css uit, denk ik.