[RÉGLÉ] Rendu de ma navbar (scrollspy - bootstrap 4)

[David ARNAUD]

Bonjour à tous,

Template : Astroïd (merci woluweb pour la présentation, je ne connaissais pas)
Extension : SP Page Builder (merci encore woluweb pour la présentation, je ne connaissais pas non plus)

J'ai une navbar sur cette page qui grâce au composant scrollspy de bootstrap 4 me permet d'avoir une classe .active sur le lien de ma navbar correspondant à la section sur laquelle je suis.
Vous pouvez voir le rendu actuel sur : http://raf.bievre-web.fr/index.php/travaux


J'assigne mon image "tête de vis" en background de mon lien qui possède la classe .active ce qui donne l'illusion d'une vis continue.

Ce que j'aimerais obtenir pour que ce soit parfait c'est :


Mais malheureusement, je ne sais pas comment sélectionner uniquement les éléments qui suivent la classe .active. peut être avec ":nth-child" il est possible de le faire ?

Merci pour votre aide

David

[woluweb]

Regarde p.ex. le sélecteur adjacent expliqué ici :
https://www.sitepoint.com/atoz-css-s...neral-sibling/

Je suis pas sûr que tu puisses sélectionner "tous les suivants" d'un coup. Au pire, tu peux faire autant de lignes css qu'il y a de sous-menu pour couvrir tous les cas

[Eddy.vh]

Bonjour.

Pour sélectionner les x éléments (items de liste <li>) après l'item actif :

ul. maClasse li.activ + li {…css…;} /* pour un élément après l'élément actif */
li.activ + li + li {…css…;} /* pour deux éléments après l'élément actif */
li.activ + li + li + li {…css…;} /* pour trois éléments après l'élément actif */
etc. à répéter autant de fois qu'il y a de possibilités

Un exemple ici.

[David ARNAUD]

Merci woluweb, merci Eddy.vh ,

ça fonctionne : http://raf.bievre-web.fr/index.php/travaux

Je suis pas sûr que tu puisses sélectionner "tous les suivants" d'un coup.

Si on peut, dans mon exemple :

#myScrollspy .active ~ a {
background-image:none !important;
}

Merci de m'avoir fait découvrir ces techniques bien pratiques.

A+

David

[Eddy.vh]

Salut,

Bien vu le sélecteur d'adjacence indirecte, je connaissais pas…