Enfants et pseudo-classes

Version imprimable

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:

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:

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:

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?

03/04/2017, 13h55
NoSmoking

Bonjour,

Citation:

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

tu te méprends sur l'utilisation du sélecteur, div > div:first-child qui dans ton cas est à lire comme le premier enfant si il s'agit d'un élément <div> ce qui n'est plus le cas.

En écrivant simplement div > :first-child tu verras que les <p> seront ciblés.

Tu aurais meilleur compte d'utiliser div:nth-of-type(1) pour cibler la première <div> etc ...

Bonjour NoSmocking et merci pour ta réponse.
Honnêtement je ne savais pas ou du moins je ne l'ai pas vu dans un tuto qu'on pouvait directement adresser les pseudo éléments comme:

Citation:

En écrivant simplement div > :first-child tu verras que les <p> seront ciblés.

Il n'y a pas beaucoup de tuto sur ces sujets et même en anglais.
Ainsi avec le même sujet, je vois qu'il y a parfois des interprétations qui ne collent pas (du moins pour moi)
Ainsi pour le combinateur d'enfants >, je trouve sur https://developer.mozilla.org/fr/doc...ecteurs_enfant le texte suivant:

Citation:

Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur. En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

Il est bien question d'enfants DIRECT avec la démonstration suivante:
http://codepen.io/JefReb/pen/NpJzpo

Toutefois dans ce topic, je n'ai utilisé QUE des div. Et apparemment si on code:
Code:

1 2 3 div > div { border: 3px solid blue; }
TOUTES les div, enfants et petits enfants sont ciblés!
voir ici: http://codepen.io/JefReb/pen/BWbVRq

Je n'ai pas compris ou alors c'est une exception avec les div.
Cela se comporte EXACTEMENT comme un sélecteur descendant

Voici mon exemple:
Code:

1 2 3 div div { border: 3px solid blue; }
Code:

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 * { box-sizing: border-box; } div { width: 430px; height: 230px; margin: 100px; padding: 10px; background-color: yellow; } div > div { width: 200px; height: 200px; margin: 2px; padding: 10px; float: left; } div > div > div { width: 120px; height: 120px; margin: 30px; padding: 10px; } div > div { border: 3px solid blue; }
Code:

1 2 3 4 5 6 7 8 9 10 <div> <div> <div> </div> </div> <div> <div> </div> </div> </div>

04/04/2017, 14h14
NoSmoking
Citation:

Je n'ai pas compris ou alors c'est une exception avec les div.
Cela se comporte EXACTEMENT comme un sélecteur descendant

CSS, cascading...
donc si tu as la structure
Code:

1 2 3 4 5 <div> <div> <div></div> </div> </div>
chaque niveau répond bien au sélecteur <div> enfant direct de <div>, ce qui te trouble peut être c'est que ce genre de structure est souvent rencontrée de par la nature des éléments <div>.

Cela ne serait plus le cas avec une structure du type
Code:

1 2 3 4 5 6 7 8 <section> <h1></h1> <div> <header> <div></div> </header> </div> </section>
04/04/2017, 17h17
JefReb

Citation:

chaque niveau répond bien au sélecteur <div> enfant direct de <div>

C'est tout à fait exact.
Cette partie est comprise.

Par contre, la solution donnée précédemment, ne marche pas du tout.

Citation:

En écrivant simplement div > :first-child tu verras que les <p> seront ciblés.

Oui, les <p> sont ciblés, mais TOUTES les balises html. Car avec firebug, on voit bien que:

Code:

div > :first-child

est équivalent à:

Code:

div > *:first-child

ce qui veut dire que même le parent <div> qui est enfant de <body> hérite des propriétés du premier enfants.
Tout comme <p>!

Mais cela n'explique pas que les couleurs de fonds ne sont pas respectées.
Mais je vais chercher et approfondir du coté de:

Citation:

div:nth-of-type(1)

Mais merci pour les réponses
04/04/2017, 17h21
JefReb

En fait, je pense que l'on ne peut pas écrire cela, mais il faut utiliser une autre approche que uniquement les <div>
Soit utiliser la structure proposer par NoSmocking avec <article>, etc., ou autre, ou soit utiliser des classes ou ID pour bien préciser quel est le parent.
04/04/2017, 18h21
NoSmoking

Ne rien mettre devant :first-child équivaut effectivement à considérer tous types d'éléments.

Citation:

Mais cela n'explique pas que les couleurs de fonds ne sont pas respectées.

J'ai bien écris
“ ... qui dans ton cas est à lire comme le premier enfant si il s'agit d'un élément <div> ce qui n'est plus le cas. ”
04/04/2017, 20h26
JefReb

oK OK c'est exact.
Merci, merci cette fois je clos le topic