CSS: sélectionnez le premier frère adjacent
J'ai une liste HTML comme ceci:
<ul>
<li class="heading">Heading 1</li>
<li class="heading">Heading 2</li>
<li>Text Under Heading 2</li>
</ul>
Puisque le titre 1 n'a pas de texte en dessous, je veux le cacher avec CSS.
Si je fais cela,
li.heading + li.heading { display: none; }
Il cache la rubrique 2 au lieu de la rubrique 1.
Comment puis-je cacher le titre 1? Existe-t-il un moyen de rechercher des frères et sœurs adjacents et de sélectionner le premier?
6 réponses
Il n'est pas possible d'utiliser CSS tel qu'il est actuellement défini et implémenté. Il faudrait un sélecteur qui sélectionne un élément sur la base de ses frères et sœurs après lui. Les sélecteurs CSS peuvent sélectionner un élément sur la base des éléments précédents ou externes, mais pas sur la base des éléments suivants ou internes.
L'effet désiré peut être atteint en utilisant JavaScript d'une manière assez simple, et vous pouvez décider, en fonction du but, si vous supprimez simplement les éléments de l'affichage ou supprimez-les complètement de l'arborescence des documents.
Il est possible de cibler le premier frère avec CSS, avec quelques limitations.
Pour l'exemple dans la question, il pourrait être fait avec quelque chose comme ceci
li.heading { display: none; } /* apply to all elements */
li.heading + li.heading { display: list-item } /* override for all but first sibling */
Cela fonctionne, mais nécessite que vous puissiez définir explicitement les styles sur les frères et sœurs pour remplacer le paramètre pour le premier enfant.
Il y a quelques façons de masquer uniquement le "titre 1" seulement:
ul li:first-child {display:none;}
Sinon:
li.parent{ display: none; }
li.parent + li.parent { display: list-item; }
Aussi, <li>Child of Heading 2</li> est pas un enfant de <li class="parent">Heading 2</li>. Il est un frère ou une sœur.
La spécification CSS3 officielle ne supporte actuellement rien de Tel, même si je me rends compte que ce serait utile.
J'essaierais de faire des recherches pour certains scripts/bibliothèques JavaScript ou jquery prédéfinis pour ajouter des sélecteurs css. Bien que je n'ai jamais rencontré quoi que ce soit.
Si vous rencontrez quelque chose, veuillez le poster ici.
Si vous ne trouvez rien, vous pourriez aussi bien le faire manuellement, ou essayer de trouver une solution complètement différente.
Je souhaite J'ai eu une meilleure réponse pour vous. Désolé : (
Essayez d'utiliser js pour getElementsby Classname et si plus de 1, utilisez css:
Ul li: premier enfant {affichage: Aucun;}
Je sais que cette question a déjà une réponse marquée VALIDE, mais peut-être que d'autres personnes veulent utiliser ma solution css uniquement:
Je voulais avoir une liste d'alertes (dans ce cas, les alertes bootstrap) dans un conteneur et leur bordure à réduire. Chaque alerte a un rayon de bordure, ce qui semble plutôt stupide quand ils sont tous dans un conteneur. Donc, avec margin-top: - 1px, j'ai fait s'effondrer leurs frontières. Comme étape suivante, j'ai dû modifier les styles de la première, chaque alerte entre et la dernière alerte. Et cela devrait également être agréable pour une seule alerte, deux alertes et n alertes.
.alert {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
margin: 0;
}
// set for the first alert that it should have a rounded top border
.alert:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
// set for the last alert that it should have a rounded bottom border
// if there is only one alert this will also trigger it to have a rounded bottom border aswell
.alert+.alert:last-child {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
//for the last border of n alerts we set the top border to be collapsing and remove only the the top rounded borders
.alert+.alert:not(:last-child) {
margin-top: -1px;
border-radius: 0;
}
// for each following alert in between we remove the top rounded borders and make their borders collapse
Et voici un modèle angulaire pour plusieurs alertes.
<div id="alertscontainer">
<div data-ng-repeat="alert in data.alerts" class="alert" data-ng-class="'alert-' + alert.class">
{{alert.body}}
</div>
</div>