Utiliser les sélecteurs CSS dans GrabzIt

Les sélecteurs CSS sont utilisés dans l'élément cible, masquent l'élément et attendent que les fonctionnalités de l'élément identifient un ou plusieurs éléments HTML. Les deux principaux types de sélecteurs CSS consistent à sélectionner par identifiant ou par classe. Un élément HTML a un identifiant s'il contient l'attribut id comme indiqué ci-dessous.

<span id="myidentifier">Example Text</span>

Pour le sélectionner, vous créez un sélecteur CSS comme #myidentifier

Si un élément HTML a une classe, il aura l'attribut class comme indiqué dans cet exemple.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

Pour le sélectionner, vous créez un sélecteur CSS comme .myclass

Si vous vouliez sélectionner un élément particulier avec la classe de myclass vous pouvez utiliser un sélecteur CSS standard pour ce faire, dans ce cas le nième enfant(2) sélecteur comme ceci : .myclass:nth-child(2) pour sélectionner la deuxième période myclass. Cependant, cela ne fonctionnera que dans ce cas car il n’y a aucun autre élément sous l’élément div parent. S'il y avait un élément ap par exemple, cela modifierait l'index du nième enfant.

Sélectionnez un élément HTML sans identifiant ni classe unique

Parfois, un élément HTML que vous devez sélectionner n'a pas d'identifiant ou de classe unique dans une page. Lors de la sélection de ces éléments HTML, un sélecteur CSS plus compliqué est requis.

<div class="Header">
   <a href="https://www.example.com/">
     <div>...</div>
   </a>
   <div class="SearchBar">...</div>
   <div class="TagLine">...</div>
</div>

Par exemple, dans l’exemple ci-dessus, nous souhaitons sélectionner l’élément DIV dans le lien. Pour ce faire, nous devons spécifier un sélecteur CSS qui fonctionne à partir du DIV unique avec le Header classe.

div.Header a div

Les sélecteurs CSS sont une fonctionnalité standard du développement Web. Cet article donne un bon aperçu de comment utiliser les sélecteurs CSS.

Gestion de plusieurs éléments correspondants

Si plusieurs éléments HTML sont renvoyés par un sélecteur CSS et que vous utilisez l'élément cible ou attendez les fonctionnalités de l'élément, seul le premier élément correspondant sera utilisé. Cependant, si vous utilisez la fonctionnalité Masquer les éléments, tous les éléments HTML correspondants seront masqués.

Si vous souhaitez masquer plusieurs éléments avec des identifiants ou des classes différents, vous pouvez le faire en séparant chaque sélecteur CSS par une virgule. Ainsi, par exemple, pour masquer l'exemple de classe et l'identifiant ci-dessus, vous utiliserez ce qui suit #myidentifier,.myclass

Getting a CSS Selector from the browser

You can get the CSS selector from the Chrome browser in two simple steps.

Right click on the part of the web page you are interested in and click Inspecter. This will open the inspector window.

Right click on the element in the inspector window click Copier puis cliquez sur Copy selector.