Tengo el siguiente HTML:
<ul> <li>A <ul> <li>subsection</li> </ul> </li> <li>B <ul> <li>subsection</li> </ul> </li> <li>C <ul> <li>subsection</li> </ul> </li> </ul> Con jQuery, ¿cómo me dirijo al PRIMER nivel de <li> s?
Por ejemplo, necesito poner la fuente en negrita al pasar el mouse sobre los <li> s con las letras A, B y C, pero NO aplicar ese estilo de fuente a los <li> s anidados (con las subsecciones de nombre).
Aquí hay una DEMO inicial de jsfiddle si desea usarla.
Gracias.
EDITAR--
Solución:
SELECTORES INFANTILES , esa es la respuesta.
No es necesario jQuery, esto se puede hacer usando CSS.
Aquí está la DEMO actualizada
EDIT-- Aquí hay una demostración más clara
Gracias,
Tenga un contenedor <div> con una clase y use el selector > . Digamos que la clase de div de su contenedor es "miclase":
.myclass ul li { ...this will affect both levels of li. } .myclass > ul > li { ...this will only affect the first level. } .myclass > ul > li > ul > li { ...this will only affect the second level. } Nota: el selector > no funciona en IE6 e inferior cuando se usa como selector de CSS. Sin embargo, funciona en todos los demás navegadores, incluidos IE7 e IE8, y cuando se usa en JQuery, funciona en todos los navegadores compatibles con jQuery, incluido IE6.
Podrías hacer esto:
$('ul > li:not(:has(ul))'); Pero sería mejor darle a su nivel superior <ul> una ID para que pueda orientarlo con un selector de CSS válido:
$('#topUL > li')SELECTORES INFANTILES , esa es la respuesta.
No es necesario jQuery, esto se puede hacer usando CSS. Apunte a los elementos li de primer nivel con un selector:
ul > li { font-weight: bold; } Y luego deshaga el estilo para elementos li más profundos:
ul > li li { font-weight: normal; }Aquí está la DEMO actualizada.