[Résolu] Agir sur les propriétés d'un élément uniquement dans le foote

Bonjour à tous et à toutes,

Ma question va peut-être sembler bête à certains, mais je la pose quand même.

J'ai un élément (class="jet-smart-listing__post-title post-title-simple") présent à plusieurs endroits de ma page d'accueil.
Je voudrais que le texte de cet élément soit blanc dans mon pied de page (car il a un fond noir) et soit noir sur le reste du site (car sur fond blanc/gris clair).

J'ai (bien sûr) réussi à changer la couleur du texte de cet élément, mais partout sur le site.
Mettre ceci :

.site-footer > .jet-smart-listing__post-title {
color:white;
}

n'a aucun effet . (site-footer étant la classe du footer)

Comment (donc) faire pour agir sur la propriété de cet élément mais uniquement dans le footer ?
D'avance merci pour vos réponses

P.S : Je précise que mon site tourne sous WordPress et que l'élément sur lequel je veux agir me permet d'afficher les derniers articles en pied de page et qu'il a été ajouté à l'aide du page builder Elementor (version gratuite PAS pro)

Hello !

Un petit moment depuis la dernière fois que je me suis collé à un problème de CSS, mais je tente quand même une réponse.
Je vois que tu as utilisé l'opérateur > dans ton sélecteur, qui permet de sélectionner les enfants directs d'un élément. As-tu vérifié si ton élément qui à la classe jet-smart-listing__post-title est bien un enfant direct de l'élément .site-footer ? Si ce n'est pas le cas, il suffit d'enlever le sélecteur >

C'est typiquement pour ce genre de problème qu'il est intéressant de savoir utiliser l'inspecteur de code de Firefox ou de Chrome pour voir quelles sont les règles CSS qui s'appliquent, voire en tester de nouvelles "on the fly"

GuillaumeBauer, comment dire... ? Si on considère que .site-footer est "l'aïeul" et .jet-smart-listing__post-title "le descendant", il y a 18 "générations" de différence.
Je me suis douté, en l'écrivant, que l'opérateur > impliquait que .jet-smart-listing__post-title soit l'enfant direct de .site-footer, mais d'un autre côté, je me vois mal écrire les 17 "générations" intermédiaires, d'où, entre autre, ma question.

bazooka07 après avoir sélectionné ma div avec l'inspecteur de Firefox, j'ai effectivement ajouté une règle CSS en lui demandant de me mettre le texte en blanc, mais ça n'a eu aucun effet car une autre règle demandant de mettre le texte en noir s'applique au même élément, mais cette fois-ci, dans le body et non dans le footer (je ne sais pas si je suis clair). Autrement dit, la règle dans le footer est annulée par celle du body.
D'où ma question : comment appliquer, dans le footer uniquement, une règle à un élément présent à plusieurs endroits dans la page (en l'occurrence le body ET le footer) ?
Modifié par spip93 (08 Sep 2018 - 23:11)

Bon... J'ai réussi à faire ce que je voulais.
Je vous la fait courte : N'arrivant pas à agir uniquement sur le footer, j'ai mis en blanc le texte appartenant à la classe .jet-smart-listing__post-title
Par conséquent, ça l'a fait sur toute la page (body + footer).
Avec le page builder Elementor, j'ai pu intervenir sur la classe .jet-smart-listing__post-title qui était dans le body uniquement.

En résumé : via le CSS, j'ai mis en place une propriété qui s'applique à toutes les classes .jet-smart-listing__post-title de la page. Ensuite, via Elementor, j'ai mis en place une seconde propriété qui s'applique, elle, uniquement au body.

Bref... j'ai réussi, c'est le principal
En tout cas, merci pour vos réponses
Bonne journée

Sinon la réponse était bien celle de de GuillaumeBauer:

.site-footer .jet-smart-listing__post-title {
  color:white;
}

En CSS l'espace est un sélecteur d'enfant quelconque alors que '>' est un sélecteur d'enfant direct.