Comment récupérer un sélecteur CSS ?

Lorsque vous utilisez les applications « Bulk SEO » et « Recommandation SEO », vous devez pour certaines « recettes SEO » cibler un élément <html> dans votre page via un sélecteur CSS.

Par exemple, je veux cibler ma balise <h1 class="maClass"> qui a une classe maClass pour modifier son contenu texte. Dans cet exemple, je vais devoir ajouter dans ma colonne <hn-target> de l’application « Bulk SEO » : h1.maClass.

Ce que vous devez savoir sur le fonctionnement des sélecteurs CSS

Si vous ciblez un sélecteur CSS présent plusieurs fois dans la page, nous appliquerons la modification sur tous les éléments ciblés.
Pour cibler un sélecteur CSS présent plusieurs fois dans la page, utilisez les parents du sélecteur pour le rendre unique. Exemple : div.maClass p.class span.
Nous ne supportons pas actuellement l’utilisation du pseudo-élément nth-child.

Cibler un sélecteur CSS avec le plug-in Automa

→ Découvrez comment utiliser Automa pour cibler un sélecteur CSS.

Cibler un sélecteur CSS avec les dev tools de votre navigateur

Pour les plus « geek » d’entre vous, utilisez les « dev tools » de votre navigateur pour identifier un sélecteur CSS.

Clic droit > inspecter.
L’inspecteur s’ouvre.
Cliquez sur l’onglet « Éléments ».
Identifiez un élément <html> qui vous intéresse dans la page.
Clic droit sur l’élément > copier > copier le sélecteur.
Vous pouvez également visualiser les classes et les éléments <html> pour le construire tout seul. 🙂
Pour vérifier si le sélecteur est unique, copiez-collez-le en bas des dev tools pour vous assurer qu’il retourne un seul résultat.

Quelques exemples de sélecteurs

Le sélecteur CSS span.highlight cible les 2 balises <span> avec la classe highlight.

<div class="maClass 100 xl">
	<span class="highlight">Premier paragraphe</span>
</div>
<div class="taClass 50 l">
	<span class="highlight">Second paragraphe</span>
</div>

Le sélecteur CSS div.maClass span.highlight cible la balise <span> avec la class highlight qui est à l’interieur de la balise div.maClass

<div class="maClass 100 xl">
	<span class="highlight">Premier paragraphe</span>
</div>
<div class="taClass 50 l">
	<span class="highlight">Second paragraphe</span>
</div>

Le sélecteur CSS a[href=”https://www.edgeseo.io”] cible la balise <a> qui l’attribut href égal à https://www.edgeseo.io

<div class="maClass 100 xl">
	<span class="highlight">
		<a href="<https://www.edgeseo.io>">www.edgeseo.io</a>
	</span>
</div>