Comment utiliser le sélecteur dans l'onglet CSS personnalisé

Utilisez "selector" (sans le point de début) pour pointer vers un élément conteneur.

Par exemple, si vous avez placé une image (ou des éléments enfants) dans une colonne, vous souhaiterez peut-être styliser le wrapper qui entoure l'image ou l'image elle-même.

Mettons une bordure rouge solide de 5 pixels autour des différents éléments pour voir ce qui se passe.

Tout d'abord, faites glisser un widget d'image sur une colonne et accédez à Image> Avancé> CSS personnalisé

Maintenant, dans l'onglet CSS personnalisé, entrez ce qui suit:

sélecteur {bordure: 5px rouge fixe; }

Puisque vous éditez le widget Image, vous pourriez être surpris de constater que la bordure n'entoure pas du tout l'image. Au lieu de cela, il entoure l'élément conteneur, qui dans ce cas, est la colonne dans laquelle se trouve l'image.

Pour spécifier l'élément enfant, ou dans ce cas, l'image, entrez ce qui suit dans le CSS personnalisé:

sélecteur img {bordure: 5px rouge fixe; }

Cela placera la bordure autour de l'image car vous avez spécifié qu'elle devrait affecter le "sélecteur img".

Maintenant, essayez ceci avec un autre exemple.

Faites glisser un widget bouton sur une colonne et donnez-lui 10 pixels de remplissage afin que vous puissiez voir clairement la colonne environnante. Faites cela en allant sur le bouton Avancée onglet et paramètres Farci à 10 pour tous les côtés.

Votre bouton devrait maintenant ressembler à ceci (vos couleurs peuvent varier):

Ensuite, appliquons une couleur d'arrière-plan à l'aide de CSS personnalisé.

Entrez ce qui suit:

selector {couleur d'arrière-plan: #ffff00; }

Comme précédemment, cela sera appliqué à l'enveloppe de l'élément bouton, plutôt qu'au bouton lui-même. Cette fois, vous remarquerez que le remplissage de 10 pixels empêche toute la colonne d'être affectée par notre style.

Et bien sûr, si vous souhaitez que la couleur d'arrière-plan soit appliquée au bouton au lieu de son habillage, vous pouvez saisir ce qui suit à la place:

selector .elementor-button {couleur d'arrière-plan: #ffff00; }

Esto dará como resultado que el fondo del botón être amarillo.

Utiliser sélecteur comme un raccourci Elementor pour vous aider à écrire du CSS personnalisé plus rapidement et plus facilement. Cependant, vous avez toujours la possibilité d'utiliser votre propre classe personnalisée.

Refaisons l'arrière-plan de ce bouton, mais cette fois, nous donnerons au bouton une classe personnalisée, que nous appellerons "so yellow". (Aller Avancé> Classes CSS et assurez-vous de ne pas inclure le point précédent ici).

Maintenant, dans l'onglet CSS personnalisé, au lieu d'utiliser "selector", nous référencerons simplement la classe personnalisée ".so-yellow", et oui, vous devrez inclure le point précédent ici.

Sans surprise, l'enveloppe de bouton affiche maintenant notre couleur jaune vif comme arrière-plan.

Que se passe-t-il si nous pointons ensuite sur le bouton?

Entrez ce qui suit:

.so-yellow .elementor-button {couleur d'arrière-plan: #ffff00; }

Vous remarquerez que la couleur violette du bouton ne NE PAS changement!

C'est parce que notre nouveau style a besoin d'un !important déclaration ajoutée dans ce cas.

.so-yellow .elementor-button {couleur d'arrière-plan: #ffff00! important; }

Maintenant, notre style est appliqué et notre bouton est à nouveau jaune.

Juste pour le plaisir et pour éviter que le texte de notre bouton ne se perde sur l'arrière-plan jaune vif, terminons la conception du bouton en modifiant la couleur du texte. Nous ajouterons également une bordure au bouton. Quelle que soit la méthode que vous utilisez, "selector .elementor-button" ou ".so-yellow .elementor-button", le code supplémentaire sera le même.

selector .elementor-button {couleur d'arrière-plan: #ffff00; couleur: #000000; bordure: 2px solide #000000; }

Profitez de l'utilisation sélecteur chaque fois que vous souhaitez ajouter rapidement du CSS personnalisé pour cibler le conteneur de cet élément.

Conseil: pour obtenir la liste des noms de classe, reportez-vous à Excellent guide de référence des noms de classes de widgets par Frank Tielemans