CSS farbliche Formatierung verschiedener Links

Hallo Freunde,
ich habe derzeit folgendes Problem in Verbindung mit Contao & CSS. Ich soll bei einer Navigation jedem Link einen farblichen Unterstrich verpassen. Link A hat farbe Blau, Link B Farbe Grün etc. Kurzes Beispiel:

Link A Link B Link C
----- ----- ------

Mit folgendem CSS Code bekomme ich es schonmal hin, dass alle Links einen farblichen Balken haben. Nun stehe ich aber vor dem Problem jeden Link unterschiedlich einzufärben, da ich ,ja nicht die ID´s ansprechen kann, bzw. keine vorhanden sind für die einzelnen Links.

HTML-Code:

---

#mainmenu a,
#mainmenu span
{
       
    display:block;
    padding:8px 18px 10px;
    border-right:1px solid #e5e5e5;
    text-decoration:none;
    color:#000;
        height: 41px;
        background: url("../../tl_files/rounded_boxes/images/dev/line1.png") repeat-x scroll 11px 32px transparent;
}

---

Erste Versuche mit dem + Selektor haben leider auch keinen Erfolg gebracht, sodass ich im Moment recht ahnungslos dastehe. Das genutzte Template ist derzeit noch Rounded Boxes und im Firebug liefert er mir folgenden Code.

HTML-Code:

---

<div id="topmenu">
<nav id="mainmenu" class="mod_navigation block">
<a class="invisible" href="#skipNavigation48">Navigation überspringen</a>
<ul class="level_1">
<li class="active first">
<li class="sibling">
<a class="sibling" title="Vorsorge" href="index.php/vorsorge.html">Vorsorge</a>
</li>
<li class="sibling">
<a class="sibling" title="Konto & Kredit" href="index.php/konto-kredit.html">Konto &amp; Kredit</a>
</li>
<li class="submenu sibling">
<a class="submenu sibling" title="Gas & Strom" href="index.php/gas.html">Gas &amp; Strom</a>
<ul class="level_2">
</li>

---

Vielleicht kann mir hier ja jemand einen Denkanstoß geben ;) - Danke

Probiere doch mal etwas in der Art:

Code:

---

a[title="Vorsorge"]{
color:#f00;
}

---

Carolina.

Vielen vielen Dank schlicht und ergreifend vergessen den Attributselektor zu verwenden :D
Ein kleines Problem ergibt sich aber noch. Der aktuell aktive link verfügt über keinen Titel und wird hierüber formartiert

HTML-Code:

---

#mainmenu span,
#mainmenu a.trail
{
    color:#000;
        background: url("../../tl_files/rounded_boxes/images/dev/line1.png") repeat-x scroll 11px 32px transparent;
}

#mainmenu a:hover,
#mainmenu span,
#mainmenu a.trail
{
    text-decoration:underline;
    color:#000;
       
}

---

Formatier ich den bleibt er nun mehr die gesamte zeit in der Farbe sprich, ich habe nach einem Klick auf einen beliebigen Link den selbigen auch in dieser Farbe, also 2 Mal diesselbe Farbe.

Hallo,

Du kannst doch in der Seitenstruktur unter Experteneinstellungen jeder Seite eine CSS-Klasse vergeben. Diese Klasse wird auch - zumindest in den Standard-Navigationstemplates - in der Navigation berücksichtigt. Mit der vergebenen Klasse sollten sich doch die einzelnen Navigationspunkte individuell stylen lassen?

Gruß
Mathias

Wenn du die Reihenfolge kennst und die sich nicht ändert kannst du auch den nth Child Selector benutzen (wenn IE6 davon Profitieren soll musst du das Selectvizr Script benutzen)

HTML-Code:

---

a:nth-child(1) {
 color:linkfarbe_1 }
a:nth-child(2) {
 color:linkfarbe_2}
a:nth-child(3) {
 color:linkfarbe_3 }

---

Mit dem Selector kannst du vieles bewerkstelligen, du kannst dir damit auch ein "Muster" generieren womit jeder dritte Link eine bestimmte Farbe zugewiesen bekommt. Zum Spielen hier : http://css-tricks.com/examples/nth-child-tester/