¿Cómo se teclea la primera y la última li con CSS o jQuery?

Question

¿Cómo puedo diseñar el primer (nivel superior) li y el último (nivel superior) li con CSS o jQuery?

estoy usando CSS para definir el primer estilo li pero también está labrando el primer li en cada nivel secundario ul, así que ¿cómo puedo conseguir que se ESTILO sólo el li con principal 1 en ella y la última con Principal 6 en eso?

Aquí está mi código:

<style> 
ul li:first-child 
{ 
width: 800px; 
border:1px solid #fc5604; border-top-width:thin; (2px) 
} 
</style> 

y HTML:

<div id="nav"> 
    <ul> 
     <li><a href="#">Main 1</a> 
      <ul> 
       <li><a href="#">Sub 1a</a></li> 
       <li><a href="#">Sub 1b</a></li> 
       <li><a href="#">Sub 1c</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Main 2</a> 
      <ul> 
       <li><a href="#">Sub 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Main 3</a> 
      <ul> 
       <li><a href="#">Sub 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Main 4</a> 
      <ul> 
       <li><a href="#">Sub 4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Main 5</a></li> 
     <li><a href="#">Main 6</a> 
      <ul> 
       <li><a href="#">Sub 6</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

Tienes que utilizar el immediate child selector:

ul > li:first-child 

Esta regla afecta a un <li> que es sólo inmediatamente precedido por un <ul>. Esto debería aplicarse tanto a jQuery como a css. No todos los navegadores pueden utilizar las clases seudo (especialmente last-child

Answer 2

<style> 
    ul > li:first-child, ul > li:last-child 
    { 
     width: 800px; 
     border:1px solid #fc5604; border-top-width:thin; (2px) 
    } 
</style> 

Answer 3

Si desea utilizar jQuery se puede utilizar el siguiente:..

$('#nav > ul li').first().css('background-color', 'red'); 
$('#nav > ul li').last().css('background-color', 'red'); 

^debe hacer el truco

Answer 4

El primer elemento es bastante simple, y veo que ya tiene el :first-child. :last-child hace lo mismo, pero tiene soporte limitado en IE. Sin embargo, si el número de elementos de la lista es fijo (lo cual me parece), puede en realidad el objetivo es el último em con CSS solo. ¡Observar!

li + li + li +li + li + li { background:pink; } 

Aquí hay un violín: http://jsfiddle.net/jgRZQ/1/

El selector + básicamente se dirige a la siguiente hermano inmediata (si coincide con su tipo), así que es una cuestión de contar su camino a la última. Y sí, esto funciona en IE7. :)

Answer 5

Indique el nombre de la clase para la primera etiqueta ul.

<div id="nav"> 
    <ul class="list"> 
     <li><a href="#">Main 1</a> 
      <ul> 
       <li><a href="#">Sub 1a</a></li> 
       <li><a href="#">Sub 1b</a></li> 
       <li><a href="#">Sub 1c</a></li> 
      </ul>........... 
................................... 

continuación, puede utilizar el siguiente CSS:

<style> 
ul.list > li:first-child{ 
width: 800px; 
border:1px solid #fc5604; border-top-width:thin; (2px) 
} 
ul.list > li:last-child{ 
width: 800px; 
border:1px solid #fc5604; border-top-width:thin; (2px) 
} 
</style>