28172 sujets

CSS et mise en forme, CSS3

Grand débutant et selecteurs

(edit par Felipe - un sujet doublon avec d'autres réponses est consultable ici : http://forum.alsacreations.com/topic-1-80049-1-Granddnbutantetselecteurs.html )

Bonjour à tous!
j'aimerai savoir comment faire pour ne colorer qu'une seule cellule dans un tableau sans toucher au fichier html(c'est a dire sans rajouter de classe à la cellule)?
je vous poste l'exercice merci tous

<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Exercice selecteurs</title>
	</head>
	
	<body>
		<div>
			<p>Bonjour, je suis le premier texte.</p>
			<p>Bonjour, je suis le second texte.</p>
		</div>
		
		<div>
			<i>Introduction</i>
			<p>Aurevoir, je m'en vais.</p>
		</div>

		<div>
			<table>
				<tr>
					<td>0</td>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
				</tr>
				<tr>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
					<td>17</td>
					<td>18</td>
					<td>19</td>
				</tr>
				<tr>
					<td>20</td>
					<td>21</td>
					<td>22</td>
					<td>23</td>
					<td>24</td>
					<td>25</td>
					<td>26</td>
					<td>27</td>
					<td>28</td>
					<td>29</td>
				</tr>
				<tr>
					<td>30</td>
					<td>31</td>
					<td>32</td>
					<td>33</td>
					<td>34</td>
					<td>35</td>
					<td>36</td>
					<td>37</td>
					<td>38</td>
					<td>39</td>
				</tr>
			</table>
		</div>

		<div>
			<div>
				<div>
				</div>
			</div>
		</div>
	</body>
</html>


en fait j'aimerai faire en sorte que le td numero 21 soit de fond noir et d'ecriture blanche.
je ne sais pas comment le cibler directement Smiley sweatdrop
Modifié par Felipe (17 Nov 2016 - 10:20)
Bonsoir,

Très simple, 2 solutions :

Soit tu appliques directement le style sur la balise td pour appliquer ton style : 


<td style="background-color:black ; color: white"></td>


Soit, la manière la plus propre, permettant la mise en cache du fichier css et de séparer style et structure est d'attribuer un id ou une classe pour pouvoir cibler ton élément (plus long mais beaucoup mieux) :

Dans ton fichier html : 


<td id="MonTdEnNoir"></td>


et dans ton fichier style.css tu cibles cet élément et lui applique les propriétés que tu désires : 


#MonTdEnNoir{
background-color:black; 
color:white
}


Par contre je te conseil honnêtement de prendre des cours et de regarder des tutos pour apprendre le HTML/CSS, parce que si tu bloques sur quelque chose d'aussi "basique", la suite risque d'être périlleuse et même si on t'apportes la solution, tu risques de ne pas comprendre certains termes pourtant très simple.

Bon courage à toi Smiley smile
Oups autant pour moi je n'avais pas lu le "sans toucher au fichier html"

Pour cela à priori il n'y à que le javascript.

Tu créées une boucle en prenant les td en considération. Ensuite tu cibles le x td que tu désires et lui applique les propriétés voulues.

Par contre pourquoi ne veux tu pas toucher au html de base ? Parce que la solution JS pose beaucoup de problème :

- Utilisation de ressources pour rien,
- si par la suite il y à d'autre td dans ton fichier, difficile de savoir quel est le td que tu désires vraiment

C'est clairement du bidouillage et ce n'est pas propre dutout.

Puis dans tout les cas tu devras inclure ce fameux fichier JS ou mettre une balise script directement dans ton html, donc tu seras dans tout les cas obligé à un moment ou un autre de "toucher au fichier html"

Je ne pense pas me tromper en disant que ce que tu demandes est donc impossible Smiley murf
Bonjour.

C'est possible avec :

table tr:nth-of-type(3) td:nth-of-type(2) {
	color: white;
	background-color: black;
}

ou :

table tr:nth-child(3) td:nth-child(2) {
	color: white;
	background-color: black;
}

Plus d'infos sur http://nthmaster.com/.

Bonne continuation.

PS : faut pas poster en double.
Modifié par thierry (19 Nov 2016 - 15:44)
Salut!!!
Merci à vous pour votre aide.
Oui je débute en fait sur html et css.
Merci encore et désolé pour le doublon Smiley smile
En fait c'est un exercice et je ne dois utiliser que le css et je ne dois pas toucher eu fichier html.
Merci encore à vous
a écrit :
En fait c'est un exercice

Était-ce bien honnête ?
Modifié par thierry (17 Nov 2016 - 18:14)
honnête!
j'ai du mal à apprendre comme ça j'ai besoin de voir la chose se faire , je suis vraiment novice.
maintenant que j'ai compris le principe tout est plus clair et je n'oublierai pas de le dire à mon prof!!!
merci encore pour ton aide j'ai compris plein de chose.je ne savais pas quelle était la difference en nth-child et nth-of-type.
Ce n'est pas un devoir noté. Smiley cligne
a écrit :
Ce n'est pas un devoir noté.

OK, pas de problème, c'est juste une question que je me posais

Disons que si ça avait été un devoir noté, à mon avis, le principe aurait été que tu te débrouilles seul.

Sinon, content que les diverses interventions t'aient éclairé.

Bonne continuation.
Modifié par thierry (18 Nov 2016 - 16:55)
Sujet clos
Aller à