28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes,

Sur un site Internet, je souhaiterais sélectionner, par exemple, tous les boutons par défaut (avec la classe btn-default), sauf s'ils ont, comme enfant(s), une icône avec une FontAwesome.

Le problème, c'est que je n'arrive pas à créer une règle CSS (un sélecteur) qui exclut ceux qui ont un enfant (je sais, la discrimination/exclusion, c'est mal Smiley lol )

Voici mon code HTML de mon bouton :

<button
    type="button"
    class="btn btn-default popover-dismiss"
    data-container="body"
    data-toggle="popover"
>
    <i class="fas fa fa-question-circle">
  		::before
    </i>
</button>


Et voici mon code CSS pour mon bouton :
#page .btn-default,
.modal-dialog .modal-footer .btn-default {
	background-color: white;
	text-align: center;
	font-weight: bold;
	border-radius: 0.5rem 0 0.5rem;
	line-height: 2;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	border: 2px solid #e14248;
	color: #e14248;
	width: auto;
}


J'ai essayé ceci :
#page .btn-default:not(.btn-default .fa)

ceci :
#page .btn-default:not(.btn-default i.fa)

ceci :
#page .btn-default:not(.btn-default > .fa)

ou encore ceci :
#page .btn-default:not(.fa)


Mais à chaque fois, la règle continue de s'appliquer à mon bouton-icône.

Auriez-vous une solution SVP ?

Merci pour vos réponses.
Bonne journée Smiley cligne
Administrateur
Hello,

Tu as essayé ça ?

.btn-default:not(:empty)


Normalement c'est fait pour ça et ici ça ne va cibler que les boutons qui ont un enfant (ou n'importe quel caractère)

Aucune de tes règles ne fonctionne car aucune ne cherche à l'intérieur du bouton.

Par exemple `.btn-default:not(.fa)` va cibler les éléments de classe .btn-default qui eux-même ne sont pas de classe .fa.

Si tu veux cibler à l'intérieur du bouton, il faut une espace `.btn-default :not(.fa)` ou un signe supérieur : `.btn-default > :not(.fa)`
Modifié par Raphael (28 Apr 2021 - 13:34)
Meilleure solution