web-dev-qa-db-fra.com

CSS: Sélectionnez le premier frère adjacent

J'ai une liste HTML comme celle-ci:

<ul>
  <li class="heading">Heading 1</li>
  <li class="heading">Heading 2</li>
  <li>Text Under Heading 2</li>
</ul>

Étant donné que l'en-tête 1 ne contient pas de texte, je souhaite le masquer avec CSS. 

Si je fais ça,

li.heading + li.heading { display: none; }

il cache le titre 2 au lieu du titre 1. 

Comment puis-je cacher la rubrique 1? Existe-t-il un moyen de rechercher des frères et soeurs adjacents et de sélectionner le premier?

csscss-selectors
24
Jeremy

Il n'est pas possible d'utiliser CSS tel que défini et implémenté. Il faudrait un sélecteur qui sélectionne un élément en fonction de ses frères et sœurs après lui. Les sélecteurs CSS peuvent sélectionner un élément sur la base d'éléments précédents ou externes, mais pas sur la base d'éléments suivants ou internes.

L’effet souhaité peut être obtenu à l’aide de JavaScript de manière assez simple et vous pouvez décider, en fonction de l’objet recherché, si vous souhaitez simplement supprimer les éléments de l’affichage ou les supprimer complètement de l’arborescence du document. 

11
Jukka K. Korpela

Il est possible de cibler le premier frère avec CSS, avec certaines limitations.

Pour l'exemple de la question, cela 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 soeurs pour remplacer le paramètre du premier enfant. 

20
Eggert Jóhannesson

Il y a plusieurs façons de ne masquer que le "Titre 1" uniquement:

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

Alternativement:

li.parent{ display: none; }
li.parent + li.parent { display: list-item; }

De plus, <li>Child of Heading 2</li> est pas un enfant de <li class="parent">Heading 2</li>. C'est un frère.

3
bookcasey

La spécification officielle CSS3 ne prend actuellement en charge rien de tel, mais je me rends bien compte que ce serait utile.

Je voudrais essayer de chercher des scripts/bibliothèques javascript ou jquery prédéfinis pour l’ajout de sélecteurs CSS. Bien que je n'ai jamais rien rencontré. 

Si vous rencontrez quelque chose, postez-le ici.

Si vous ne trouvez rien, vous pouvez également le faire manuellement ou essayer de trouver une solution complètement différente.

J'aimerais avoir une meilleure réponse pour vous. Pardon :(

0
James Kyle

Utilisez :first-of-type

Vous pouvez en lire plus here

0
Inam Ul Huq

Je sais que cette question a déjà une réponse marquée valide, mais peut-être que d'autres personnes souhaitent utiliser ma solution css uniquement:

Je voulais avoir une liste d'alertes (dans ce cas, des alertes bootstrap) dans un conteneur et leur bordure pour s'effondrer. Chaque alerte a un rayon de bordure, ce qui est plutôt ridicule quand ils sont tous dans un même conteneur. Donc avec margin-top: -1px, j'ai fait s'effondrer leurs frontières. Ensuite, je devais modifier les styles de la première, de chaque alerte entre la dernière et de la dernière alerte. Et cela devrait également chercher Nice 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>
0
FTav

essayez d'utiliser js pour getElementsby Classname et, s'il y en a plus d'un, utilisez css:

ul li: premier-enfant {display: none;}

0
Nabeel Khan