:nth-of-type ne marche pas avec un nom de class ?

[Visiteur]

Salut

J'ai plusieurs DIV à la suite avec le même nom de class :

<div class="dossier-block-qr">

</div>

<div class="dossier-block-qr">

</div>

<div class="dossier-block-qr">

</div>

Je voulais mettre un margin-top à la seconde. J'ai donc mis dans mon CSS :

.dossier-block-qr:nth-of-type(2) {margin-top:20px;}

Mais ce n'est pas pris en compte. La propriété :nth-of-type ne marche pas avec les nom de class ? car si je met, par exemple :

.dossier-block-qr p:nth-of-type(2) {font-weight:bold;}

ça marche bien. J'ai même essayé avec :

div.dossier-block-qr:nth-of-type(2) {margin-top:20px;}

Mais pareil.

[lomart]

Bonjour,

Cela doit marcher. Il doit y avoir une autre erreur

https://jsfiddle.net/puayqLoL/

[Visiteur]

Effectivement ça marche, mais un truc zarbi que je comprend pas. Avec .dossier-block-qr:nth-of-type c'est uniquement les div avec la class .dossier-block-qr qui sont prit en compte et aucun autre div pouvant se trouver avant ou entre. Hors, dans ce cas est prit en compte les div n'ayant pas la class .dossier-block-qr et se trouvant avant le 1° .dossier-block-qr ! !

Je ne peux pas vous mettre de lien car je suis en local.

[lomart]

si body est le parent, tenter
body div.dossier-block-qr:nth-of-type(2)

Je ne peux pas vous mettre de lien car je suis en local.

Vous pouvez mettre le code HTML généré en PJ

[Visiteur]

Le parent c'est .article-body et même si je fait :

.article-body div.dossier-block-qr:nth-of-type(2)

ça ne change rien. Voici le HTML : Probleme nth-of-type.7z

[lomart]

Il faut que l'on apprenne à lire
nth-of-type veut dire un enfant de TYPE pas de classe. C'est pour cela que mon exemple fonctionne (div par défaut) ou celui avec P
Il faut trouver un autre moyen de cibler

Le contenu est fait comment ? pas à la main, car un style inline aurait résolu le problème

[ghazal]

Salut,
nth-of-type n'est pas évident à manipuler.
Il y a qq temps, j'ai bataillé avec et j'ai finalement trouvé une solution alternative pour cibler une balise avec la spécification "title".
Exemple ici :

https://codepen.io/ghazalp/pen/pVXBMG

HTML

<div class="dossier-block-qr" title="truc">

CSS

.dossier-block-qr[title~=truc] {color: #fac}

[Visiteur]

Il faut que l'on apprenne à lire
nth-of-type veut dire un enfant de TYPE pas de classe. C'est pour cela que mon exemple fonctionne (div par défaut) ou celui avec P
Il faut trouver un autre moyen de cibler

Mais alors ca ne devrait justement pas marcher avec ton exemple vue ca utilisait une class.

Le contenu est fait comment ? pas à la main, car un style inline aurait résolu le problème

j'ai pas compris ta question.

Salut,
nth-of-type n'est pas évident à manipuler.
Il y a qq temps, j'ai bataillé avec et j'ai finalement trouvé une solution alternative pour cibler une balise avec la spécification "title".
Exemple ici :

https://codepen.io/ghazalp/pen/pVXBMG

Je ne connaissais pas cette specification title dans un DIV. C'est quoi exactement ? Apres, quitte a ajouter un element et dans le meme esprit, il suffit d'ajouter une class :

<div class="dossier-block-qr dossier-block-qr-01">

[lomart]

Bonjour,

Mais alors ca ne devrait justement pas marcher avec ton exemple vue ca utilisait une class.

Si, car si on ne précise pas le type de balise, c'est toutes les balises.
J'ai actualisé mon exemple https://jsfiddle.net/puayqLoL/3/
On voit bien que la règle :nth-of-type(3) { background-color: yellow; } colore le troisième bloc div et P. Si on met l'indice 1, il colore aussi le body qui est unique

j'ai pas compris ta question.

Je voulais dire que si le contenu est un simple article, ce que laisse penser la classe mère article-body, pourquoi ne pas mettre un style inline ?
<div style="margin-top:20px">....</div>

Je ne connaissais pas cette specification title dans un DIV. C'est quoi exactement ?

Ce n'est pas spécifiquement title, il s'agit d'une sélection par attribut. Voir https://developer.mozilla.org/fr/doc...urs_d_attribut
cela permet de se sortir de cas difficiles, mais aussi d'augmenter le poids du sélecteur pour que la règle soit prioritaire. exemple a.toto[title^="xxx"][alt*="yyr"]
autre exemple pratique: mettre en rouge tous les liens non https : a[href^="http://"] {color:red}

[papounet]

Il faut utiliser la bonne pseudo-class ! La pseudo-classe :nth-child(an+b) permet de cibler un élément qui possède an+b-1 éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières n et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.

/* Cible les éléments en fonction de leur position dans */ /* le document : ici le 2e, 4e, 8e, 16e, 20e, etc. quel que */ /* soit le type de l'élément */ body :nth-child(2n) { background-color: lime; } Illustrons cela avec quelques exemples :

• 1n+0 ou n ciblera chaque élément fils. n ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'1n fonctionne. 1n est synonyme de 1n+0 et les deux peuvent donc être utilisés de façon équivalente.
• 2n+0 ou 2n ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-clé even à la place de cette expression.
• 2n+1 ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-clé odd à la place de cette expression.
• 3n+4 permettra de cibler les éléments fils 4, 7, 10, 13, etc.
• 0n+3 (ou plus simplement 3) permettra de cibler le troisième élément.

Comme il y a que 3 div, vous pouvez aussi faire ceci :
div.dossier-block-qr { color: red // Tous avec encre rouge div.dossier-block-qr:first-child, div.dossier-block-qr:last-child {color:black;} // Allez hop, il reste que celui du milieu en rouge

[Visiteur]

Bonjour,

Je voulais dire que si le contenu est un simple article, ce que laisse penser la classe mère article-body, pourquoi ne pas mettre un style inline ?
<div style="margin-top:20px">....</div>

Haaaa le mettre directement dans l'HTML ! oui aussi. Mais si je fait ca pour toute les div c'est plus simple de mettre dans le CSS. Et j'aurais peut être besoin d'appliquer autres chose à cette div, donc autant ajouter une class, comme je l'avais suggéré dans mon message précédent (<div class="dossier-block-qr dossier-block-qr-01">)

Bonjour,
Ce n'est pas spécifiquement title, il s'agit d'une sélection par attribut. Voir https://developer.mozilla.org/fr/doc...urs_d_attribut
cela permet de se sortir de cas difficiles, mais aussi d'augmenter le poids du sélecteur pour que la règle soit prioritaire. exemple a.toto[title^="xxx"][alt*="yyr"]
autre exemple pratique: mettre en rouge tous les liens non https : a[href^="http://"] {color:red}

C'est dans le même esprit que :nth-of-type mais en beaucoup plus précis. Très intéressant, je vais regarder ça de plus prêt..

Il faut utiliser la bonne pseudo-class ! La pseudo-classe :nth-child(an+b) permet de cibler un élément qui possède an+b-1 éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières n et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.

/* Cible les éléments en fonction de leur position dans */ /* le document : ici le 2e, 4e, 8e, 16e, 20e, etc. quel que */ /* soit le type de l'élément */ body :nth-child(2n) { background-color: lime; } Illustrons cela avec quelques exemples :

• 1n+0 ou n ciblera chaque élément fils. n ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'1n fonctionne. 1n est synonyme de 1n+0 et les deux peuvent donc être utilisés de façon équivalente.
• 2n+0 ou 2n ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-clé even à la place de cette expression.
• 2n+1 ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-clé odd à la place de cette expression.
• 3n+4 permettra de cibler les éléments fils 4, 7, 10, 13, etc.
• 0n+3 (ou plus simplement 3) permettra de cibler le troisième élément.

Comme il y a que 3 div, vous pouvez aussi faire ceci :
div.dossier-block-qr { color: red // Tous avec encre rouge div.dossier-block-qr:first-child, div.dossier-block-qr:last-child {color:black;} // Allez hop, il reste que celui du milieu en rouge

Dans mon cas je voulais cibler uniquement les div avec dossier-block-qr. C'est pour ça que j'ai utilisé la pseudo-class par type.

[ghazal]

Dans le fichier que tu as envoyé, il y a des incohérences au niveau de l'html.
Essentiellement des balises div fermées au mauvais endroit.

En extrayant et corrigeant la partie que tu cibles, on obtient ceci :

https://codepen.io/ghazalp/pen/pVXBMG

J'ai conservé à dessein qq erreurs dans cette partie.

En conservant l'intégralité du body, c'est pire.

PS : tu peux faire un fork (ou un clone) de l'exemple que j'utilise sur codepen, à condition d'être inscrit.
Tu peux aussi faire ton propre "pen" pour tes essais,
Place seulement les éléments disposés à l'intérieur du body.

[Visiteur]

Merci de me l'avoir signaler. Je vais revoir le code de mon article et réparer tout ça.