Discussion :

[JefReb]

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?

[NoSmoking]

Bonjour,

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 ...

[JefReb]

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:

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:

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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
* {
	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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div><!-- Parent -->    
    <div><!-- enfant 1-->
      <div><!-- petit enfant 1--> 
      </div>
    </div>
    <div><!-- enfant 2-->
      <div><!-- petit enfant 2--> 
      </div>
    </div>
  </div>

[NoSmoking]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<section>
  <h1></h1>
  <div>
    <header>
      <div></div>
    </header>
  </div>
</section>

[JefReb]

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.

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

div > :first-child

est équivalent à:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

div:nth-of-type(1)

Mais merci pour les réponses

[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.