How do I retrieve a CSS selector?

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.

What you need to know about CSS selectors

If you target a CSS selector present several times in the page, we'll apply the modification to all the targeted elements.
To target a CSS selector present several times in the page, use the selector's parents to make it unique. Example: div.maClass p.class span.
We do not currently support the use of the nth-child pseudo-element.

Targeting a CSS selector with the Automa plug-in

→ Find out how to use Automa to target a CSS selector.

Target a CSS selector with your browser's dev tools

For the more geeky among you, use your browser's "dev tools" to identify a CSS selector.

Right-click > inspect.
The inspector opens.
Click on the "Elements" tab.
Identifiez un élément <html> qui vous intéresse dans la page.
Right-click on element > copy > copy selector.
Vous pouvez également visualiser les classes et les éléments <html> pour le construire tout seul. 🙂
To check whether the selector is unique, copy and paste it at the bottom of the dev tools to make sure it returns a single result.

Some examples of selectors

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>