Bonjour à tous,
Je voulais utiliser le signe > et les pseudo-classes :first-child :nth-child() et :last-child
Cela fonctionne parfaitement jusqu'à ce qu'on ajoute un seul paragraphe <p>
1) http://codepen.io/JefReb/pen/KWJJMO
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
* {
	box-sizing: border-box;
}
div {
	width: 460px;
	height: 475px;
	margin: 100px;
	padding: 10px;
	background-color: #F9F;
}
div > div {
	width: 200px;
	height: 200px;
	margin: 2px;
	padding: 10px;
	float: left;   /* le float left ou right n'a pas d'importance! */ 
}
div div {
	border: 3px solid black;
}
div p {
	margin: 0;
	padding: 0;
	text-align: center;
	color: blue;
}
 
 
div > div:first-child {
	background-color: blue;
}
div > div:nth-child(2)  {
	background-color: white;
}
div > div:nth-child(3)  {
	background-color: red;
}
div > div:last-child  {
	background-color: green;
}

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
	<!--<p>Parents</p>-->
  <div>
  <!--<p>enfant 1 </p>-->
  </div>
  <div>
  <!--<p>enfant 2 </p>-->
  </div>
  <div>
  <!--<p>enfant 3 </p>-->
  </div>
  <div>
 <!-- <p>enfant 4 </p>-->
  </div>
</div>

Dès que j'ajoute un paragraphe pour nommer les carrés, alors les couleurs de fond désignées par les pseudo-classes ne sont plus respectées
2)http://codepen.io/JefReb/pen/xqMMRq
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
	<p>Parents</p>
  <div>
    <p>enfant 1 </p>
  </div>
  <div>
    <p>enfant 2 </p>
  </div>
  <div>
   <p>enfant 3 </p>
  </div>
  <div>
   <p>enfant 4 </p>
  </div>
</div>

Quelqu'un a-t-il une explication à ce phénomène?