Y at-il un moyen de cacher le nième élément dans une liste avec CSS?

Exemple:Y at-il un moyen de cacher le nième élément dans une liste avec CSS?

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

Est-il possible de cacher le 2ème élément à l'aide css?

Source

2009-09-08 GollyJer

Merci d'avoir une valeur ajoutée tant à cette question. – GollyJer

Cela importe parce que si vous avez le mot "Designer" dans votre titre d'emploi, alors vous devriez poser la question à http://www.doctype.com. Sinon, la question est bonne ici à SO. Je ne l'ai pas demandé au hasard – EBGreen

Où obtenez-vous mon titre d'emploi? – GollyJer

nth-child est en effet la voie CSS.

En CSS pur, la syntaxe est simplement

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

nth-of-type(2) œuvres dans ce cas aussi. Editer: Bien que ce soit la réponse CSS, comme indiqué, c'est CSS3 et implémenté only in some browsers. IE et FF3 et ci-dessous ne le supportent pas nativement. Implémenté dans FF3.5, Konqueror, et incorrectement dans Chrome, Safari et Opera. nth-of-type() les implémentations sont meilleures.

La prise en charge dans les anciens navigateurs nécessitera javascript (simplifié avec jQuery, et al). Le sélecteur jQuery est décrit dans les documents Selectors/nthChild, et ce qui précède peut être accompli avec $("li.mybutton:nth-child(2)").hide().

Source

2009-09-08 17:43:50

A travaillé parfaitement. Merci Bill. Pour l'anecdote, il s'agit d'une implémentation CSS3 et, comme le dit Jon Galloway, elle n'est supportée que par les navigateurs «modernes». http://www.webdevout.net/browser-support-css#css3pseudoclasses – GollyJer

Je ne pense pas que ce soit une vraie solution maintenant, sauf si vous pouvez demander à vos utilisateurs d'exécuter les dernières versions des navigateurs non IE. –

@Jon, c'est une vraie solution à * sa * question. Il a demandé CSS et l'a étiqueté css, alors je lui ai donné la réponse CSS. Mais, je vais ajouter une mise en garde à la réponse. –

n-th child pseudo selectors faites cela, mais ils ne sont pas encore largement supportés et ne le seront pas pendant un certain temps. Vous aurez besoin de Javascript/jQuery ou pour écrire une classe spéciale pour les éléments que vous voulez cacher ou simplement cacher les éléments directement.

Voilà comment vous le feriez avec jQuery:

$("ul.mybuttons li:nth-child(2)").hide();

Source

2009-09-08 17:35:17

Merci pour la réponse Jon. Pour clarifier ... JQuery a des procédures internes qui traitent les pseudo-sélecteurs CSS3 passés en paramètres rendant ainsi cette solution compatible avec le navigateur. J'ai seulement accès au CSS pour cette question, mais cela vaut la peine de vérifier ma compréhension pour de futurs projets. Merci encore. – GollyJer

Oui, jQuery a un moteur de sélection très avancé qui gère CSS3 + et est rétrocompatible avec IE6. –

ul.mybuttons li:first-child { 
    display:none; 
}

Source

2012-06-04 17:23:09

Je vais d'abord mettre en place la deuxième li class = "hidden_li" dans le fichier HTML.

Exemple:

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

Alors je le style comme ceci:

.hidden_li{ 
    visibility : hidden; 
    height : 0px; 
    width : 0px; 
    margin : 0px; 
    padding : 0px; 
    overflow : hidden; 
}

Source

2016-03-03 03:52:42 Mateo

Y at-il un moyen de cacher le nième élément dans une liste avec CSS?

Répondre

Questions connexes