Comment cibler des sélecteurs précis dans un tableau ?

Bonjour à vous,

Je n'arrive pas à cibler des cellules précises dans un tableau pour mettre leur contenu en rouge, en utilisant la déclaration CSS suivant :

table > tr > td > span > code{
	color: red;
}

Comment cibler uniquement les <code> (Item1, 2 et 3) et changer leur couleur sans toucher aux autres cellules ?

Voici le code :
https://jsfiddle.net/qtwo8vhs/

Merci pour votre aide et ne basculez pas du côté obscur du code !
Modifié par ObiJuanKenobi (09 Sep 2022 - 18:10)

.tableau tr td:first-child {
  background-color: red;
}

Salut,

Si on part de ton sélecteur il y a juste une erreur c'est que entre table et tr il y a un tbody (même si tu ne l'as pas ajouté, regarde dans l'inspecteur de code). Donc au plus prêt c'est :

table tr > td > span > code {
	color: red;
}

Le selecteur de pparenté direct est un peu overkill d'ailleurs et c'est ce qui t'as donné l'erreur. Ceci marche tout autant :

table tr td span code {
	color: red;
}

Au dela de ça, ton sélecteur est a rallonge, est-ce que tu as vraiment besoin de faire toute cette cascade ?

table code {
	color: red;
}

Sinon si on se limite a ton exemple un simple :

code {
	color: red;
}

suffit largement.
Et pour conclure je dirait même qu'il vaudrait mieux faire une classe CSS spécifique que tu n''aura qu'a coller sur l'élément que tu veux :

.jevoislavieenrouge {
	color: red;
}

	<table class="tableau">
		<tr>
			<td>
				<span>
					<code class="jevoislavieenrouge">Item1</code>
				</span>
			</td>
			<td>Exemple de texte</td>
		</tr>
		<tr>
			<td>
				<span>
					<code class="jevoislavieenrouge">Item2</code>
				</span>
			</td>
			<td>Exemple de texte</td>
		</tr>
		<tr>
			<td>
				<span>
					<code class="pasmoi">Item3</code>
				</span>
			</td>
			<td>Exemple de texte</td>
		</tr>
	</table>

Modifié par _laurent (09 Sep 2022 - 20:06)

Merci Laurent pour tes explications.

Je ne peux pas utiliser directement

code {
	color: red;
}

parce <code> est utilisé aussi dans d'autres tableaux dont je ne veux changer la couleur.

Je ne veux pas non plus utiliser une classe spécifique parce que j'ai au total 7 tableaux avec plus de 200 lignes dont un tableau avec plus de 500 lignes. Je me vois mal coller la classe dans chaque cellule <td>.

C'est pour ça que je demandais comment cibler tous les <code> et leur attribuer une propriété sans intervenir dans la structure HTML.

ça :

table tr > td > span > code {
color: red;
}

ça marche.

Merci Laurent