Masquer tous sauf le premier enfant d'un élément à l'aide de pure css
Je suis en train d'essayer de cacher tout autre enfant après la naissance du premier enfant, classa classe de l'élément.
CSS:
div.classa {
display:none;
}
div.classa:first-child {
display:block !important;
}
HTML:
<div class="content">
<h3>abc</h3>
<div class="classa">some content</div>
<h3>xyz</h3>
<div class="classa">more content</div>
<h3>header3</h3>
<div class="classa">another content</div>
</div>
Comment obtenir cette aide pur css.
- si vous voulez montrer d'abord '<h3> " ou " <div class="classa">'
- être précis sur ce que vous voulez montrer.
- Je veux montrer d'abord '<div class="classa">'
Vous devez vous connecter pour publier un commentaire.
Si vous voulez support d'IE8, votre seule option est général sélecteur de frères:
CSS:
HTML:
Découvrez ici https://jsfiddle.net/32vw04jg/1/
Le problème dans votre code que vous souhaitez masquer le première
.classa
, mais la première.classa
n'est pas le premier enfant dans.content
, leh3
est le premier enfant.Donc, comme une alternative à la
:not()
pseudo classe, vous pouvez utilisernth-of-type(n+2)
. Cela permet de sélectionner tous les éléments avec le même type, à l'exception de la première.CSS:
HTML:
Vous pouvez le faire comme ça:
Css:
Vous pouvez essayer le
:not
pseudo — classe https://developer.mozilla.org/en-US/docs/Web/CSS/:notVoir cette réponse
Il y a de nouveaux CSS3 est
:first-of-type
pour votre cas:Démo
Si je comprends bien la question, le but ici est de se cacher à chaque enfant (
h3
etdiv.classa
), à l'exception de la premièreh3
et ladiv.classa
à côté d'elle.La façon la plus facile de l'accomplir est une combinaison de la
:first-of-type
et la~
générale (frères et sœurs) des sélecteurs.CSS:
HTML: