[CSS] Probleem met inheritance van classes*

[Verwijderd]

Hallo heren,
ik moet morgen een Practische Opdracht voor school inleveren, dat mag ook in de vorm van een website. Ik heb een prima websiteje (al zeg ik het zelf ) gemaakt, maar nu blijf ik op één van de simpelste dingen haken?! Ik heb gewoon een style.css met het volgende:

code:

a:link { 
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;  
}
a:visited {
    text-decoration: underline;
    color:#FFFFFF;
}
a:hover {
    font-weight: 100;
    color:#FF0000;
    text-decoration: none;
}
a.main:link {
    color:#FF0000;
}
a.main:visited {
    color:#FF0000;  
    text-decoration:underline;
}
a.main:hover {
    color:#FF0000;
    background-color:#CCCCCC;
}
.nav {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:10px;
  color:#FFFFFF;
  padding: 4px;  
}

.main {
  padding: 4px;
  font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

Het zal ws weer een n00b actie zijn, maargoed. Ook links in cellen met class="main" krijgen nu de link stijl van a:link etc, ipv a.main:link etc.

Ook als ik a:link naar a.nav:link wijzig, krijgen de td's met style="nav" de standaard link stijlen
(edit: met standaard bedoel ik hier: link is blauw en underline, visited is paars etc)

Het zal wel iets stoms van mij zijn maar ik ben jullie eeuwig dankbaar als iemand me helpt

[ Voor 5% gewijzigd door Verwijderd op 05-04-2006 21:53 ]

[JHS]

Die class slaat nu op het anchor zelf, niet op de parent natuurlijk . Als je een parent met class main, en daarin de anchor wil selecteren, moet je eerder iets als ".main a:link { } doen.

[Michali]

Als je linkjes in een ander element met een bepaalde class hebt staan, dan spreek je die zo aan:

Cascading Stylesheet:

td.main a
{
  /* hier je stijl */
}

Even aangenomen dat je met cellen een td bedoelt.

w00t, te laat

[ Voor 9% gewijzigd door Michali op 05-04-2006 22:03 ]

[Spruit_elf]

ik moet beter lezen ... nvm

[ Voor 110% gewijzigd door Spruit_elf op 05-04-2006 21:58 ]

[JHS]

mrcactus: In welke zin is dat een fix, er is namelijk geen bug ofzo . Daarnaast wordt er gewoon niks geselecteerd, dus zal de !important nul effect hebben.

FragK: Je hebt overigens nogal wat duplicatie in je code . Je zegt nu drie maal dat .main a[..] color:#FF0000; moet hebben, terwijl je beter eerst .main a kan selecteren, en daarna de specifieke afwijkingen kan opgeven. Zoiets dus:

Cascading Stylesheet:

/* Niet */
td.main a:link {
  color: #fff;
  text-decoration: none;
}

td.main a:visited {
  color: #fff;
  text-decoration: none;
}

td.main a:hover {
  color: #fff
  text-decoration: underline;
}

/* Maar */

td.main a {
  color: #fff;
  text-decoration: none;
}

td.main a:hover {
  text-decoration: underline;
}

[Verwijderd]

Ah dank jullie wel. Het is nu gelukt, hoewel ik het niet meteen snapte. Wanneer mag je nou eigenlijk gewoon a.classnaam:link gebruiken, als het niet in een tabel staat?
Maargoed, het werkt nu dus ik ben blij, kan ik mooi m'n opdracht op tijd inleveren.

Code is nu:

HTML:

td.nav a:link { 
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;  
}
td.nav a:visited {
    text-decoration: underline;
    color:#FFFFFF;
}
td.nav a:hover {
    color:#FF0000;
    text-decoration: none;
}
td.main a { 
  color: #FF0000; 
  text-decoration: none; 
} 
td.main a:hover { 
  text-decoration: underline; 
}
.nav {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:10px;
  color:#FFFFFF;
  padding: 4px;  
}
.main {
  padding: 4px;
  font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

Niet bepaald perfect maar het werkt wel Nu even uploaden e.d.

Nogmaals bedankt!

[BtM909]

Wees blij dat JHS je wilde helpen... Dit staat in elke BASIC CSS tutorial