im just wondering if what I want to do is possible with jQuery...

I have the following...

<ul class="navmenu">
    <li>Something</li>
    <li>Something</li>
    <li>Someting</li>
    <li>Something</li>
</ul>

What i want to do is display:none; the first LI within .navmenu, is this possible?

im just wondering if what I want to do is possible with jQuery...

I have the following...

<ul class="navmenu">
    <li>Something</li>
    <li>Something</li>
    <li>Someting</li>
    <li>Something</li>
</ul>

What i want to do is display:none; the first LI within .navmenu, is this possible?

• javascript
• jquery
• html

• 4 Sure, have lot ways to do that, try to read the docs api.jquery./category/selectors even google can answer that for you... – Gabriel Gartz Commented Dec 23, 2011 at 15:15

6 Answers 6

Just use:

$('.navmenu > li:first-child').hide();

jsFiddle Example.

You also may want to check out the jQuery Tutorials and jQuery Selectors API Docs as this is a pretty basic usage of jQuery.

<sarcasm>No, you can't do it. Ever.</sarcasm>

$('.navmenu li:first').hide()

CSS Solution (this should prevent the first element from flickering on page load):

.navmenu > li:first-child {display: none;}

sure,

$('ul.navmenu li:first').css('display', 'none');

You can use a descendant selector, >, to select the li children of the ul with the navmenu class name, then use the first-child pseudo class to select just the first one. Then you can set css styles using the css method:

$("ul.navmenu > li:first-child").css("display", "none")

Live example: http://jsfiddle/uDeQE/1/

Yep, certainly is:

$('.navmenu li:first')

You could also user the pseudo selector in CSS if its styling you're after:

.navmenu li:first-child