Sugerencia cabecera de lista

[moron]

Hola Gente.

tengo una lista definida con un estilo, y necesito agregar a una de las <li> un formato de "cabeza de lista" por decirlo de una manera.

Un jquery hace rotar una lista de productos, pero yo necesito categorizarlos y no encontré una forma "no horrible" de hacerlo.

Código HTML:

 <div class="navigator-content">
                  <div class="navigator-wrapper">
                        <ul class="navigator-wrap-inner">
                  
                        
                          <li>
                                </div>
                                    <img src="images/lofthumbs/791902news3.jpg" />
                                    <h5> NewsFlash 1 </h5>
                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
                                </div>    
                            </li>
                             <li>
                                <div>
                                    <img src="images/lofthumbs/435576news10.jpg" />
                                    <h5> NewsFlash 2 </h5>
                                    <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                </div>    
                            </li> 

COn este CSS

Código HTML:

/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner  li.active{
	background:url(../images/arrow-bg.png) no-repeat scroll left center; 
	color:#FFF
}
.lof-slidecontent ul.navigator-wrap-inner  li >  div{
	background:url(../images/transparent_bg.png);
	color:#FFF;
	height:100%;
	position:relative;
	margin-left:15px;
	padding-left:15px;
	border-top:1px solid #E1E1E1;
	text-align:left 
	
}

.lof-slidecontent ul.navigator-wrap-inner li.active div{
	background:url(../images/grad-bg.gif);
	color:#FFF;
}
.lof-slidecontent ul.navigator-wrap-inner li img{
	height:60px;
	width:60px;
	margin:15px 15px 10px 0px;
	float:left;
	padding:3px;
	border:#C5C5C5 solid 1px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active img, 
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
	border:##6C8E5C  solid 1px;
}
.lof-slidecontent  .button-next, 
.lof-slidecontent .button-previous{
	display:block;
	width:40px;
	color:#FFF;
	cursor:pointer;
	position:absolute;
	height:100%;
	z-index:40;
	top:0;
	text-indent:-999px;

}
.lof-slidecontent   .button-next {
	right:0px;
	background:url(../images/next.png) no-repeat right center;
}
.lof-slidecontent  .button-previous {
	left:0px;
	background:url(../images/previous.png) no-repeat left center;
}


.lof-slidecontent .button-control {
   position:absolute;
   top:10px;
   right:48%;
    height: 20px;
    width: 20px;
	cursor:hand; cursor:pointer;
	background:url(../images/transparent_bg.png) repeat;
}

.lof-slidecontent .button-control span { display:block;  width:100%; height:100%;}
.lof-slidecontent .action-start span  {
	background:url(../images/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
	background:url(../images/pause.png) no-repeat center center;
}

Me pueden sugerir algo que quede bien?

Muchas gracias desde ya.

[pzin]

Añade una clase al elemento de la lista que necesites diferente, ¿no?

Tienes un cierre de un div que debería de ser una apertura.

[moron]

Gracias por la respuesta.

El script que estoy usando toma cada <li> como un elemento seleccionable que al hacerle click muestra una foto y contenido asociado al mismo. El tema es que si agrego un nuevo <li> como cabecera, lo va a tomar como un elemento mas de esa lista, siendo que no lo es.
Había pensado en agregarle un div, dentro del div del primer elemento de cada lista, y rotular su categoría ahi.

[pzin]

Iniciado por moron

Gracias por la respuesta.

El script que estoy usando toma cada <li> como un elemento seleccionable que al hacerle click muestra una foto y contenido asociado al mismo. El tema es que si agrego un nuevo <li> como cabecera, lo va a tomar como un elemento mas de esa lista, siendo que no lo es.
Había pensado en agregarle un div, dentro del div del primer elemento de cada lista, y rotular su categoría ahi.

Dado que usas jQuery, si mal no recuerdo tiene selectores de negación, que puedes usar como selector para que no afecte por ejemplo a cabecera.li.