Cambiare formattazione a un solo <li>

[Allie]

Ho un menu formato da un <ul> i cui[*] hanno una certa formattazione, avrei però necessità che l'ultima voce abbia una formattazione differente sia in termini di colore, che come immagine di sfondo, ecc.
Tutte le voci del menu sono anche dei link.
Ho provato ad applicare una classe sia al[*] che all' <a>, solo che prende solo alcune impostazioni ed altre no: sono riuscita a cambiare dimensione, allineamento del testo, a mettere uno sfondo, ma non riesco a fargli prendere il bold e neppure a cambiargli colore.
Come posso fare?

Questo è il css dell' ul e dei link che contiene:

    #persone {
           list-style : none;
      }
     #persone li {
           font-size : 12px;
           font-weight : bold;
           font-family : Arial, Helvetica, sans-serif;
           text-transform : uppercase;
      }
     #persone a {
           color : black;
           font-family : Arial, Helvetica, sans-serif;
           font-weight : bolder;
           text-decoration : none;

e queste sono le modifiche che cerco di apportargli:

background : url(images/angolino2.jpg) no-repeat bottom; /*OK*/
           font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; /*OK*/
           font-size : 10px; /*OK*/
           font-weight : bolder; /*Non va*/        
           color : white; /*Non va*/ 
           text-transform : lowercase; /*OK*/
           text-align : right; /*OK*/
           padding-top : 3em; /*OK*/

[felixsuperstar]

non ti converrebbe chiudere il tag <ul> prima dell'ultima voce ed aprirne un altro con un solo elemento di lista (quello che tu desideri abbia formattazione differente)??

[pierofix]

Basta applicare una classe all'ultimo elemento di lista, ad esempio così:

XHTML
<ul id="persone">[*]Ciao[*]Miao
   <li class="ultimo_elemento">Bau[/list]

CSS
#persone
{
   font:bold 12px Arial, Helvetica, sans-serif;
   list-style-type:none;
}
   #persone li
   {
      text-transform:uppercase;
   }
       #persone li a
      {
         color:#000;
         font-weight:bolder;
         text-decoration:none;
      }
      #persone li.ultimo_elemento a
      {
         padding-top:3em;
         color:#fff;
         background:url(images/angolino2.jpg) no-repeat 0 100%;
         font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
         text-transform:lowercase;
         text-align:right;
      }

Non ho provato ma dovrebbe funzionare. Facci sapere.

[pierofix]

Originariamente inviato da felixsuperstar
non ti converrebbe chiudere il tag <ul> prima dell'ultima voce ed aprirne un altro con un solo elemento di lista (quello che tu desideri abbia formattazione differente)??

Quando si mette mano al markup è perchè occorre impostare un certo significato, non una certa formattazione. Se quella lista è unica e anche il suo ultimo elemento ne fa logicamente parte, diventa un errore spezzare l'elenco ai fini della presentazione.

Prima si dà significato all'informazione, poi la si veste.

[Allie]

Grazie pierofix
Ora però mi prende tutto tranne il padding-top e il text-align

[pierofix]

Dovresti assegnare un 'display:block' a #persone li.ultimo_elemento a. Ti ricordo che i tag a sono considerati di tipo inline, quindi non possono ricevere certe proprietà.

[Allie]

Grazie pierofix! Così funziona!