Personalizar el primer <li>

[juandedios]

Hola, estoy haciendo un menú horizontal el <li> está así:

Código CSS:

ul#boxnav li {
    margin: 0;
    padding-left: 30px;
    padding-right: 30px;
    border-left: 1px #FFF solid;
    color: #FFF;
    float: left;
}
 

Sale bien pero el border-left que pongo también se ve en el primer <li> y ahi no quiero que vaya, buscando en la net vi que se podía poner así:

Código CSS:

ul#boxnav li.first {
    margin: 0;
    padding-left: 30px;
    padding-right: 30px;
    border-left: none;
    color: #FFF;
    float: left;
}
 

De esta forma no saldría el border-left en el primer <li>, pero me digue saliendo. quizas estoy haciendo algo mal.

Espero que me puedan ayudar.

[kseso?]

Pero falta la segunda parte, aplicarlo al html para que le afecte:

Código html:

<ul id="boxnav">
        <li class="first">....</li>
         ....
</ul>
 

¿lo haces?

y para evitar conflictos

Código css:

ul#boxnav li.first {border-left: 0!important;/* resto propiedades*/}
 

[loncho_rojas]

Pruebalo ASi

Código HTML:

ul#boxnav li:first-child {
  
          margin: 0px;
          padding-left: 30px;
          padding-right: 30px;
          border: none;
		  color: #FFF;
          float: left;

      }

[juandedios]

Gracias loncho_rojas asi salió, chevere.

[juandedios]

lo que quiero hacer es esto:
Pero hay cosas que no me salen, por ejemplo, como poner el texto al medio y que al pasar le mouse por encima de un menú que se ponga así como CONTACTO y que las líneas verticales sean del tamaño del texto y que no sean del tamaño del cuadro rojo.

Por favor si alguien me pudiera guiar.

[cristian_cena]

juandedios:

Para que cambie el color de fondo debes usar

.tu_clase:hover {
background-color:el_color_que_tu_quieras;
}

con la pseudoclase hover puedes hacer efectos de rollover sin la necesidad de usar javascript, solo con css

Saludos!

[juandedios]

si, eso lo se, el problema que tengo es que cuando le doy los padding correspondientes al " li a " para que tome el tamaño que quiero la linea que los separa toma el mismo tamaño y yo quiero que se siga viendo así de pequeña como la imagen que di.

[cristian_cena]

bien, probablemente esa linea que tu dices sea un caracter "|" y ese caracter modifica su tamaño con la propiedad font-size:; ¿que tal si le das el font-size adecuado en li a:hover {}?

Saludos!

[kseso?]

¿Y si pones los códigos que estás utilizando?. Css y html.
Porque esto último es distinto de tu primera consulta.

Un salduo

[juandedios]

Y lo resolví, gracias por su tiempo e interés, aquí les dejo el codigo de como quedó:

Código CSS:

#boxnav {
    padding-left: 30px;
    width:850px;
}
 
#boxnav ul, li {
    list-style-type: none;
}
 
#boxnav ul {
    margin: 0;
    padding: 0;
}
 
#boxnav li {
    float: left;
}
 
#boxnav a {
    text-decoration: none;
    color: #FFF;
    background: #D83432;
    display: block;
    padding: 7px 32px;
    text-align: center;
    font-weight: bold;
    background: url(../image/sepmenu.gif) no-repeat;
    background-position: left;
}
 
#boxnav a#first {
    background: none;
    font-weight: bold;
}
 
#boxnav a:hover {
    background: #FFF;
    color: #D83432;
    font-weight: bold;
}
 
#boxnav a#first:hover {
    background: #FFF;
    color: #D83432;
    font-weight: bold;
}