Menu
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?
711
10 Ways to Hide Elements in CSS. 1 Animation. Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, ... 2 Accessibility. 3 Event Handling. 4 Performance. 5 1. opacity and filter: opacity () More items
Is it possible to hide the 2nd item using css? Show activity on this post. nth-child is indeed the CSS way. 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.
In the list settings you can select the content types as on. then select the item content type and hide the column Show activity on this post. Maybe I am missing something, but these answers are way more complicated than they need to be.
So far, the position method is the closest we’ve seen to an accessibility-friendly way to hide things in CSS. But the problem with focusable content causing sudden page jumps isn’t great.
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().
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
