maggie: class soll div Angabe überschreiben

Hallo,
wie muss die CSS Anweisung für eine definierte class .first

.first a:link, .first a:visited {  
color:#095197;  
}

aussehen, um diese div Anweisung

#mainNav ul.menu li a:link, #mainNav ul.menu li a:visited {  
    color: #000000;  
}

zu überschreiben.

Danke für einen Tipp.
Maggie

  1. .first a:link, .first a:visited {  
    color:#095197 !important;  
    }
    

    Oder zu benutzt einen Selektor mit höherer Spezifität.

    1. .first a:link, .first a:visited {

      color:#095197 !important;
      }

      
      >   
      > Oder zu benutzt einen Selektor mit höherer Spezifität.  
        
      !important greift leider nicht, aber wenn ich's auf die 'li' ausweite, sollte es doch genau spezifiziert sein - aber leider zeigt sich damit auch nicht die richtige Farbe  
      ~~~css
      .first ul.menu li a:link,  
      .first ul.menu li a:visited  
      {  
      	color:#095197;  
      }
      

      :-( Maggie

      1. !important greift leider nicht

        Also bei mir schon.
        Schöner finde ich aber sowieso die Variante mit dem spezifischeren Selektor.
        Rumschleudern mit !importants kann nämlich schnell im Chaos enden.

        1. PS: Es gibt auch einen first-child-Selektor.

          1. PS: Es gibt auch einen first-child-Selektor.

            Danke sehr, für die präzisen Ausführungen.

            Die 'child' Möglichkeiten sind ja sehr interessant. Dann müsste bei
            li:first-child {color:red;}
            jeder 1. Listeneintrag in roter Schrift gezeigt werden!?

            Bei meiner gewünschten Anweisung habe ich so meine Probleme, besonders mit der Link Angabe:

            ul .menu li:first-child a:link  
            {  
              color:#095197;  
            }
            

            Warum die 1. Anweisung nicht gegriffen hat, liegt wohl daran das noch eine Verschachtelung dazu kommt.

            <div id="mainNav">  
            <li id="verband">  
            <div class="moduletable">  
            <ul class="menu">  
            <li class="item-112">  
            <a class="first" href="/index.php/dequs">Name</a>
            
            #mainNav li.verband .moduletable  ul.menu li:first-child a:link,  
            #mainNav li.verband .moduletable  ul.menu li:first-child a:visited {  
               color:#095197;  
            }
            

            Müsste hier das a:link an einer anderen Stelle stehen?
            Gruß
            Maggie

            1. Die 'child' Möglichkeiten sind ja sehr interessant. Dann müsste bei
              li:first-child {color:red;}
              jeder 1. Listeneintrag in roter Schrift gezeigt werden!?

              Soweit diese Regeln nirgendwo anders überschrieben werden - ja.

              <div id="mainNav">

              <li id="verband">
              <div class="moduletable">
              <ul class="menu">
              <li class="item-112">
              <a class="first" href="/index.php/dequs">Name</a>

                
              Outch, wieso das zusätzliche li-Element? Listeneinträge gehören in Listen.  
                
              
              >#mainNav li.verband .moduletable  ul.menu li:first-child a:link,  
              >#mainNav li.verband .moduletable  ul.menu li:first-child a:visited {  
              >   color:#095197;  
              >}  
                
              
              >Müsste hier das a:link an einer anderen Stelle stehen?  
                
              Nein, aber ich glaube du wolltest "li#verband" (mit Raute) schreiben.
              
            2. Ark, beim zweiten lesen fällt natürlich immer nochmal was auf.

              Warum die 1. Anweisung nicht gegriffen hat, liegt wohl daran das noch eine Verschachtelung dazu kommt.

              Die Verschachtelungstiefe ist deinen Selektoren egal, da du den Nachfahren-Selektor (" ", Leerzeichen) verwendest und nicht den Kind-Selektor (">"). Tu dir aber selbst einen Gefallen und versuche deine Selektoren so einfach wie möglich zu halten, du musst nicht für jedes Element die gesamte Verschachtelungstiefe ab dem html-Wurzelelement im Selektor mitschleppen.

              1. Die Verschachtelungstiefe ist deinen Selektoren egal, da du den Nachfahren-Selektor (" ", Leerzeichen) verwendest und nicht den Kind-Selektor (">"). Tu dir aber selbst einen Gefallen und versuche deine Selektoren so einfach wie möglich zu halten, du musst nicht für jedes Element die gesamte Verschachtelungstiefe ab dem html-Wurzelelement im Selektor mitschleppen.

                ...ja, mir ist nicht klar, wie weit ich zurückgreifen muss, um eindeutig die gewünschte Angabe zu machen - deshalb hatte ich die Klasse .first vergeben und dachte, dass ich nur diese Klasse ansprechen muss um den gewünschten Effekt zu erzielen.

                li#verband .moduletable ul.menu li:first-child a:link {color:red;}

                Gruß
                Maggie

      2. wenn ich's auf die 'li' ausweite, sollte es doch genau spezifiziert sein

        Abder der vemeintlich allgemeinere Selektor beinhaltet einen id-Selektor, damit hat er automatisch eine höhere Spezifität als jeder andere Selektor ohne id-Selektor. Wie man die Spezifität berechnet ist gut aus der Spezifikation zu entnehmen.