Sélectionner un élément et hiérarchisation

3

min

quiz

L’outil de sélection vous permet de sélectionner un ou plusieurs éléments.

Sélection simple

Pour sélectionner un élément, assurez-vous que le mode édition est activé, en haut à droite du header Kameleoon. Si vous êtes en mode navigation, cliquez une fois pour passer en mode édition.

Lorsqu’aucun élément n’est sélectionné, passez la souris sur un élément pour afficher son identifiant ainsi qu’un cadre de sélection. L’élément qui sera sélectionné est recouvert d’une zone bleue. Une fois positionné sur l’élément de votre choix, il vous suffit alors de cliquer pour le sélectionner.

Une fois l’élément sélectionné, la zone bleue disparaît, et le cadre de sélection reste.

Si vous souhaitez que les balises HTML apparaissent, cochez la case « Afficher les balises HTML » dans les préférences d’affichage.

Affiner la sélection

Une fois l’élément sélectionné, le panneau suivant apparaît :

Si ce panneau vous gêne, par exemple s’il cache un élément, vous pouvez le glisser-déposer ailleurs sur votre page. Pour cela, cliquez n’importe où sur le panneau, déplacez-le à l’emplacement de votre choix avant de relâcher la souris.

La partie centrale de ce panneau indique quel est l’élément sélectionné ainsi que ses éléments parents. Si vous cliquez sur le nom d’un élément parent, celui-ci sera sélectionné à la place de la sélection en cours.

Dans l’exemple ci-dessus, « Elément de liste » est l’élément que nous avons sélectionné, « Liste » et « Bloc » ses éléments parents.

Pour afficher la liste complète des éléments parents et enfants, cliquez sur l’icône située à la gauche du panneau de sélection :

Une liste déroulante s’ouvre, dans laquelle vous retrouvez l’intégralité des éléments parents ou enfants. Scrollez vers le haut pour afficher les éléments enfants ou vers le bas pour afficher les éléments parents.

Note : Il peut arriver que vous rencontriez des difficultés à sélectionner un élément s’il est caché par un autre élément. Dans cette situation, utilisez cet outil pour le sélectionner.

Pour observer l’ensemble de ces actions en situation, n’hésitez pas à visionner notre vidéo :

Sélection multiple

Pour sélectionner plusieurs éléments, commencez par sélectionner l’un des éléments qui fera partie de votre sélection.

Une fois l’élément sélectionné et le panneau de sélection affiché, cliquez sur l’icône verte, à droite du panneau : 

Une liste s’ouvre, vous permettant d’affiner votre sélection.

Selon l’élément sélectionné, différentes fonctionnalités seront disponibles :

  • Tag : Sélectionne tous les éléments de même type sur la page (balise HTML). Par exemple, tous les éléments h4.
  • Classe : Sélectionne tous les éléments sur la page partageant la même classe HTML.
  • Contenu : Sélectionne tous les éléments sur la page qui ont le même contenu. Par exemple pour sélectionner tous les boutons « Ajouter au panier ».
  • Custom : Sélectionne tous les éléments sur la page partageant le même sélecteur CSS personnalisé. Pour plus d’informations sur les sélecteurs CSS, vous pouvez consulter notre article sur la création de sélecteurs CSS.
  • Éléments enfants
  • Éléments parents