3
votes

Sélecteur CSS, éléments entre deux classes

J'essaye d'écrire un sélecteur css qui peut sélectionner les éléments entre deux classes.

Exemple:

<div class='start'></div>
<div></div> 
<div></div>
<div class='end'></div>

Ma question est la suivante: y a-t-il un moyen d'utiliser le sélecteur css pour sélectionner deux div entre le div .start et .end div?

Toute aide est appréciée!

html css css-selectors

0 commentaires

4 Réponses :

3
votes

Je pense que votre meilleure option est d'utiliser le sélecteur : not () en CSS. CSS n'a pas de mécanisme permettant de sélectionner des éléments entre les deux.

<div class='start'>A</div>
<div>B</div>
<div>C</div>
<div class='end'>D</div>

div:not(.start):not(.end) {
  background: red;
}

1 commentaires

Une alternative pourrait être .start ~ div: not (.end)

1
votes

div:not(.start):not(.end) {
  color: blue;
}

Pour référence, suivez ce lien ci-dessous

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

0 commentaires

2
votes

<div class='start'>start</div>
 <div></div> 
 <div></div>
 <div class='end'>end</div>

.start ~ div:not(.end) {

    border: solid 1px #bdbdbd;
    padding: 10px;
}

0 commentaires

2
votes

En complément de la réponse de @Nidhin Josephr, vous pouvez également le faire sans ajouter la classe .start & .end en utilisant : not () avec : nth-child : nth-last-child pseudo selector.

Codepen

div:not(:nth-child(1)):not(:nth-last-child(1)){
  background: red;
}

0 commentaires