25

Example:

<ul class="mybuttons">
   <li class="mybutton"></li>
   <li class="mybutton"></li>
   <li class="mybutton"></li>
</ul>

Is it possible to hide the 2nd item using css?

9
  • Thanks for adding so much value to this question.
    – GollyJer
    Sep 8, 2009 at 17:45
  • It matters because if you have the word "Designer" in your job title then you should ask the question at doctype.com. Otherwise the question is fine here at SO. I didn't just randomly ask it
    – EBGreen
    Sep 8, 2009 at 17:49
  • Where are you getting my job title?
    – GollyJer
    Sep 8, 2009 at 18:00
  • I'm not getting your job title from anywhere. That is exactly why I had to ask "What is your job title."
    – EBGreen
    Sep 8, 2009 at 19:35
  • Wow. That just goes to show how defensively I read things online. Initially I read your comment as "your title supposes you should know the answer to this question, why the hell are you even asking?". Sorry about that. My title is CTO. linkedin.com/in/jeremygollehon This question was really for my personal website where I'm trying to simplify the UI of the Disqus comment system to relieve confusion for non-techie friends and family. Disqus allows customization through CSS from their admin console. blog.thegollys.com/2009/09/testing-comments-again.html
    – GollyJer
    Sep 8, 2009 at 21:08

4 Answers 4

43

nth-child is indeed the CSS way.

In pure CSS, the syntax is simply

li.mybutton:nth-child(2){
   display:none;
}

nth-of-type(2) works in this case too.

Edit: Though this is the CSS answer, as noted, this is CSS3 and implemented only in some browsers. IE and FF3 and below do not support this natively. Implemented in FF3.5, Konqueror, and incorrectly in Chrome, Safari, and Opera. nth-of-type() implementations are better.

Support in older browsers will require javascript (simplified with jQuery, et al). jQuery selector is described in the Selectors/nthChild docs, and the above can be accomplished with $("li.mybutton:nth-child(2)").hide().

5
  • 2
    Worked perfectly. Thanks Bill. For the record this is a CSS3 implementation and, as Jon Galloway states, is only supported by 'modern' browsers. webdevout.net/browser-support-css#css3pseudoclasses
    – GollyJer
    Sep 8, 2009 at 18:55
  • 1
    I don't think this is a real solution right now unless you can require your users to run the newest versions of non-IE browsers. Sep 8, 2009 at 21:49
  • @Jon, it is a real solution to his question. He asked for CSS and tagged it css, so i gave him the CSS answer. But, i'll add a caveat to the answer.
    – b w
    Sep 9, 2009 at 12:12
  • bill - I agree, hope I didn't sound argumentative. Can't wait for wide browser support of CSS3! Sep 10, 2009 at 0:00
  • @Jon, no, no worries. Yep! It will be nice when CSS3 is more widely adopted. Makes things so much easier.
    – b w
    Sep 10, 2009 at 2:07
9

n-th child pseudo selectors do this, but they're not widely supported yet and won't be for a while. You'll either need Javascript / jQuery or to write out a special class for the items you want to hide or just hide the items directly.

Here's how you'd do it with jQuery:

$("ul.mybuttons li:nth-child(2)").hide();
2
  • Thanks for the reply Jon. To clarify... JQuery has internal procedures that process CSS3 pseudo selectors passed as parameters thus making this solution back browser compatible? I only have access to the CSS for the purpose of this question but it's worth verifying my understanding for future projects. Thanks again.
    – GollyJer
    Sep 8, 2009 at 21:16
  • 1
    Yes, jQuery has a very advanced selector engine that handles CSS3+ and is backward compatible to IE6. Sep 8, 2009 at 21:51
1
ul.mybuttons li:first-child {
   display:none;
}
0

I will first set up the second li as class="hidden_li" in the HTML file.

Example:

<ul class="mybuttons">
<li class="mybutton"></li>
<li class="mybutton" class="hidden_li"></li>
<li class="mybutton"></li>
</ul>

Then I will style it like this :

.hidden_li{
  visibility : hidden;
  height : 0px;
  width : 0px;
  margin : 0px;
  padding : 0px;
  overflow : hidden;
}
1
  • 6
    You killed the dead several times. Aug 11, 2018 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.