Bonjour @b481,
Ce que vous cherchez s’appelle un « sélecteur CSS » (ou simplement « sélecteur » pour faire court). Les sélecteurs CSS servent à « trouver » (ou sélectionner, évidemment) l’élément du DOM que vous souhaitez styliser.
Par exemple, depuis l’endroit où je tape actuellement, je vais chercher le sélecteur de votre nom d’utilisateur dans le compositeur (juste à titre d’exemple).
Voici la démarche : placez la souris sur l’élément (votre nom d’utilisateur b481 dans le compositeur), faites un clic droit et un menu apparaîtra avec l’option « Inspecter ».
Cliquez sur « Inspecter » pour ouvrir la console de développement (ici, je suis sous Chrome sur macOS) ; et avec un peu de chance, l’élément que nous cherchons sera mis en surbrillance.
Si vous faites un clic droit sur l’élément mis en surbrillance dans la console, vous verrez une option de menu « Copier » → « Copier le sélecteur ».
Si vous choisissez cette option et copiez le sélecteur, vous obtiendrez dans cet exemple :
#ember433 > span > a
Ce n’est pas vraiment un très bon sélecteur car #ember433 est assigné par Ember, mais vous pouvez déplacer votre souris sur les éléments dans la console : cela mettra en surbrillance les éléments à la fois sur la page concernée et dans la console. La bonne nouvelle est que nous sommes dans le bon domaine, rapidement et facilement.
Vous pouvez ensuite trouver l’élément que vous souhaitez masquer et, dans cet exemple, vous pouvez faire un clic droit à nouveau sur l’élément (cet exemple) pour tester en choisissant « ajouter un attribut » dans le menu sous la souris afin de tester notre sélecteur.
Je viens de faire cela à titre d’exemple dans cette capture :
et maintenant, cet élément avec votre identifiant ‘b481’ est masqué dans cette partie du DOM…
Ainsi, dans ce cas, nous savons que si nous utilisons le CSS :
span.action-title{
display:none;
}
Nous pouvons l’ajouter à notre thème et nous aurons masqué cet élément.
Dans ce cas, vous devriez vérifier s’il y a plus d’un élément sur la page avec le même sélecteur, et vous devriez également vous assurer que le sélecteur choisi ne sera pas trop « gourmand » et ne sélectionnera pas des éléments sur d’autres pages que vous ne souhaitez pas masquer.
Plus le sélecteur est spécifique, mieux c’est.
Par exemple, dans ce cas, nous pouvons le rendre plus spécifique en précisant que notre sélecteur est un enfant d’un élément parent, dans ce cas (non testé) :
div.compose-action-title > span.action-title{
display:none;
}
Vous voyez que nous devenons plus précis ; et à ce stade, vous devriez avoir une assez bonne idée de la façon de chercher les éléments que vous souhaitez modifier.
Bonnes recherches !
Une dernière remarque :
Vous pouvez utiliser JavaScript et jQuery pour sélectionner des éléments, mais j’ai constaté que dans les applications SPA comme Discourse/Ember, les sélecteurs CSS fonctionnent bien, du moins pour moi. J’ai tendance à n’utiliser les sélecteurs JavaScript que lorsque je dois parcourir le DOM d’une manière « délicate » (ce qui peut aussi être très amusant).
J’espère que cela vous aidera.
Voir aussi :