Discussion :

[enzostar]

Bonjour,

j'aimerais pouvoir sélectionner en css une div qui serait la seconde d'une longue série au sein d'une div spécifique.

Voici un exemple de mon arbre html

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
16
17
18
19
20
21
22
23
24
<div class="box">
	<div class="energy-header"></div>
	<div class="energy-selection-container"></div>
	<div>      
		<div id="data-dashboard-energy">
			<div id="data-dashboard-energy-selection">
				<p>select</p>
			</div>
			<div class="data-dashboard-energy-display">
				<p>1</p>
			</div>
			<div class="data-dashboard-energy-display">
				<p>2</p>
			</div>
<div class="data-dashboard-energy-display">
				<p>3</p>
			</div>
<div class="data-dashboard-energy-display">
				<p>4</p>
			</div>
		</div>
		<div id="chart"></div>   
	</div>
</div>

j'aimerais selectionner la 2ème div avec la classe "data-dashboard-energy-display"


Merci pour votre aide

[Bovino]

Code :

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

:nth-of-type(2)

[enzostar]

Merci pour ta réponse.
j'ai essayé ceci

Code :

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

div.data-dashboard-energy-display:nth-of-type(2)

et ceci

Code :

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

.data-dashboard-energy-display:nth-of-type(2)

mais la selection ne marche pas

[Bovino]

Effectivement... il semble que :nth-of-type ne prenne en compte que le nom de balise du sélecteur pour déterminer quel élément impacter... J'avoue que ça me surprend un peu.

[CCyrillus]

Bonsoir,

tu peut, en étant plus bavard avec les sélecteurs d'adjacence, ciblé les premieres balises que tu souhaites stylé , puis ecraser les styles pour ceux qui ne sont pas concernés.
par exemple le paragraphe dans le second div avec la classe x : http://codepen.io/gc-nomade/pen/ltFih

Code :

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
.data-dashboard-energy-display ~ /* si 1 devant */
.data-dashboard-energy-display 
p
{
  background:tomato;/* different */
}
.data-dashboard-energy-display 
p,
.data-dashboard-energy-display ~ /* si 1 devant */
.data-dashboard-energy-display ~ /* si 2 devant */
.data-dashboard-energy-display
p
{
  border:solid;
  background:turquoise;/* different */
  padding:1px;
}

[Muchos]

il semble que :nth-of-type ne prenne en compte que le nom de balise du sélecteur pour déterminer quel élément impacter

Non, ta proposition fonctionne
Et si Voir ci-dessous. Komanksénaze CSS3

[Bovino]

Code :

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

.foo:nth-of-type(2){color: green;}

va d'abord récupérer tous les éléments qui sont les deuxièmes enfants pour une balise donnée puis sélectionner ceux qui ont la classe .foo.

Avec

Code html :

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

1
2
3
4
5
6
7
<div>contenu</div>
<div class="foo">contenu</div>
<div class="foo">contenu</div>
<div>contenu</div>
<div>contenu</div>
<div>contenu</div>
<div>contenu</div>

c'est bien le premier .foo (qui correspond à la seconde <div>) qui est impacté.