Étiquette : siblings

[jQuery] Parcourir le DOM à la recherche d’un élément suivant ou précédent, mais qui n’est pas nécessairement frère de l’élément de départ

Source : jQuery find next/prev elements of a certain class but not necessarily siblings (EDIT 3).

Les méthodes next, prev, nextAll et prevAll sont très utiles pour parcourir le DOM à la recherche d’un ou plusieurs éléments frères d’un élément situé dans le même parent. Mais comment procéder si l’élément suivant ou précédent qu’on cherche à cibler se situe à l’extérieur de l’élément parent propre à notre élément de départ ?

Dans l’exemple suivant, je cherche à atteindre la classe .to-find-this en partant de l’ID #start-from-here.

Cette action est rendue possible grâce aux fonctions jQuery suivantes :

Je peux désormais cibler la classe .to-find-this en partant de l’ID #start-from-here avec la déclaration suivante :

[CSS][SASS] Un chemin à étapes complexe avec les pseudo classes Before, After et les sélecteurs Sibling

tricky-process

L’idée ici est de mettre en place un chemin à étapes pour un tunnel d’achat sans avoir recours à JavaScript ou jQuery. La petite difficulté repose notamment dans le fait que la bordure qui se trouve sous chaque intitulé doit être affichée en 2 couleurs lorsqu’on veut signifier l’étape en cours.

Markup HTML:

SASS:

Autre déclinaison (responsive !)


Les mixins sont ceux de la grille Flexbox de Foundation 6.

[CSS] Cibler le premier élément d’une liste qui possède une certaine classe parmi ses frères.

Source : CSS select first element with a certain class;