Listen mit "name" ansteuern

[fahluk]

Hallo Forum,

ich hoffe ihr könnt mir weiterhelfen.

Ich erstelle mittels CMS folgende Linkliste:

<div id="a_1">
  <ul>
    <li id="topmenu" name="link_1" class="self">Link 1</li>
    <li id="topmenu" name="link_2" class="nav">Link 2</li>
    <li id="topmenu" name="link_3" class="nav">Link 3</li>
  </ul>
</div>

mit CSS steuere ich das Aussehen über id und class.

#a_1 ul li{
  display:block;
  background-color: red;
}

#a_1 ul li a{
  color: black;
  text-decoration: none;
}

#a_1 ul li a.self{
  font-weight: bold;
}

Soweit so gut, nun möchte ich aber dass Link 3 eine andere Hintergrundfarbe hat, also müßte ich den name="link_3" ansteuern, denn das ist der einzige Parameter der sich fortlaufend verändert, doch wie kann ich das machen?

Schöne Grüße
fahluk

 

[Maik]

Hi,

das li-Element besitzt gemäß der HTML-Attributreferenz überhaupt kein name-Attribut, darf aber z.B. das Universalattribut id enthalten.

Der gleichlautende ID-Bezeichner (#topmenu) für die li-Elemente ist wiederum nur einmalig im HTML-Dokument zulässig, und ergibt da im übergeordneten ul-Element einen deutlich größeren Sinn.

Daraus folgend ergibt sich nun dieses Markup:

<div id="a_1">
  <ul id="topmenu">
    <li id="link_1" class="self">Link 1</li>
    <li id="link_2" class="nav">Link 2</li>
    <li id="link_3" class="nav">Link 3</li>
  </ul>
</div>

und diese Regelerweiterung im Stylesheet, um für den dritten Link seine individuelle Hintergrundfarbe festzulegen:

#a_1 ul li{
  display:block;
  background-color: red;
}

#a_1 ul li#link_3 {
  background-color: yellow;
}

#a_1 ul li a{
  color: black;
  text-decoration: none;
}

#a_1 ul li a.self{
  font-weight: bold;
}

mfg Maik