27799 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,
J'ai plusieurs titres h1 dont la couleur initiale est noire, mais j'aimerais que certains soient blancs.
J'ai tenté de mettre une classe, cela ne change rien.
Quelqu'un peut-il m'aider siouplait ?
Mon CSS :
.white {
	color: white;
}

Mon HTML :
<div class="hsContainer">
	<div class="hsContent">
			<h1 class="white">Simple</h1>
			<h2 class="white">Montexte</h2>
	</div>
</div>

Merci pour votre aide.
Bonne soirée,
ED
Modérateur
Salut,

C'est la bonne façon de faire.

SI ca n'a aucun effet c'est qu'un autre sélecteur CSS est plus fort. Auquel cas il faut que tu regarde dans ton inspecteur de code quel est le sélecteur qui passe devant et faire en sorte d'avoir un poids supérieur ou égal.
Pour compléter ce que dit Laurent : il y a plein de manières de donner du poids à un sélecteur dans le but d'écraser une règle déjà définie ailleurs dans les feuilles de styles, ou même en ligne. Le mieux est de trouver la règle déjà existante afin de l'écraser efficacement (ou même de la modifier directement si lorsque cela est possible et pertinent).

Exemple de sursélection avec l'ajout de la classe d'un conteneur :
.hsContainer .white {
	color: white;
}

Une sélection avec encore plus de poids que la précédente :
.hsContainer .hsContent .white {
	color: white;
}

On aurait aussi pu prendre un élément parent générique (ça fait le job, mais je ne suis pas fan) :
html .white {
	color: white;
}

Dans le front on a aussi des effets de mode, comme par exemple avec le pseudo-élément :root (à peine adopté par certains que déjà déconseillé par d'autres qui préfèrent le réserver pour une utilisation spécifique, comme la définition des variables CSS) :
:root .white {
	color: white;
}

Une autre manière de faire une sursélection avec l'inclusion du tag html associé à la classe :
h1.white {
	color: white;
}

Les ID ont plus de poids que les classes, les classes sont elles-même plus spécifiques que les tags html, toutes ces techniques se combinent, etc... Ces règles fonts partie de la base de la définition des styles et ne doivent pas être de la magie pour vous. Un peu de lecture à lire absolument, ainsi vous comprendrez tout :
- Comprendre le poids des règles css
- Poids des sélecteurs Css

Enfin, en dernier recours, n'oublions pas le bazooka évoqué sur un autre topic, mais qui obéira aux mêmes règles de ciblage si un !important est lui-même posé ailleurs dans le code :
.white {
	color: white !important;
}

Modifié par Olivier C (19 Dec 2021 - 10:03)
Bonjour,
Merci beaucoup Laurent et Olivier pour vos réponses.
Pour être honnête, je n'ai pas compris cette histoire de poids, même si j'ai regardé le lien d'Olivier (merci).
Les deux premières solutions proposées par Olivier fonctionnent à merveille.
Ça me semble encore être du B.A.-BA Smiley eek
Leçon retenue Smiley biggrin
Passez de bonnes fêtes,
ED