CSS für 2 Navigationen + CSS pagination

**mavnet** · 03.06.2013, 22:07

Hallo,

ich bin am verzweifeln!!!

Und zwar habe ich 2 individuelle Navigationen, eine oben, eine links.
Den Navigationen habe ich jeweils eine individuelle ID gegeben:

#nav für die navigation oben
#nav_demo für die navigation links

Zudem habe ich eine Pagination von einer Event-Liste, bei der alle Termine eines Jahres in "5er-Schritten" durchgeblättert werden können.
Der Artikelseite der Event-Liste hat die ID #termine

Wenn ich nun die Pagination Links mit css bearbeite, wirkt sich dies unmittelbar auch auf die Links der anderen navis aus, obwohl doch alle Elemente eigene Selektoren haben ?!

Beispiel:

Ich möchte den Pagination Links unter der Seiter "#termine" folgendes css geben:

Code:

#termine a.link, a.next, a.previous, a.last, a.first  {

   background-color:#ffffff;
    border:1px solid #bbbbbb;
    color:#303030;
  
    padding:1px 5px 2px 5px;
    text-decoration:none;


}

Funktioniert auch wunderbar, aber nun sehen die a.last, a.first bei den anderen Navis ebenfalls so aus, also bekommen auch einen weißen Hintergrund.
Wieso wird das denn vererbt, obwohl eigene Selektoren verwendet werden?

Hier mal das benötigte css zusammengeschnipselt:

Für die Pagination:

Code:

#termine a.link, a.next, a.previous, a.last, a.first  {

   background-color:#ffffff;
    border:1px solid #bbbbbb;
    color:#303030;
  
    padding:1px 5px 2px 5px;
    text-decoration:none;


}


#termine a.link:hover, a.next:hover, a.previous:hover, a.last:hover, a.first:hover  {

  background-color: #bbbbbb;
    border:1px solid #303030;
}

Für die Navi im header:

Code:


#nav ul {
    float:left;
    text-align:right;
}

#nav li {
    float:left;
    display:inline;
    margin:0 15px 0 0;
}

#nav a,  {
    text-decoration:none;
    color:white;
}



#nav a:hover {
    text-decoration:none;
    color:#4e9873;
}

Für die navi links:

Code:

#nav_demo li {
    margin-bottom:12px;
    padding-left:50px;
    text-align:left;
}

Ich verstehe es einfach nicht .... was mach' ich falsch?

Viele Grüße,

mavnet

**wulf** · 03.06.2013, 22:53

Code:

#termine a.link,
#termine a.next,
#termine a.previous, 
#termine a.last, 
#termine a.first  {

   background-color:#ffffff;
    border:1px solid #bbbbbb;
    color:#303030;
  
    padding:1px 5px 2px 5px;
    text-decoration:none;
}