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

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    Salut

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

    Code HTML:
    <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 :

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

    Code:
    .dossier-block-qr p:nth-of-type(2) {font-weight:bold;}
    ça marche bien. J'ai même essayé avec :

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

  • #2
    Bonjour,

    Cela doit marcher. Il doit y avoir une autre erreur
    JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      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.

      Commentaire


      • #4
        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
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          Le parent c'est .article-body et même si je fait :
          Code:
          .article-body div.dossier-block-qr:nth-of-type(2)
          ça ne change rien. Voici le HTML : Probleme nth-of-type.7z
          Fichiers joints

          Commentaire


          • #6
            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
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax
            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire


            • #7
              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 :


              HTML
              <div class="dossier-block-qr" title="truc">
              CSS
              .dossier-block-qr[title~=truc] {color: #fac}
              Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

              Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

              Commentaire


              • #8
                Envoyé par lomart Voir le message
                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.

                Envoyé par lomart Voir le message
                Le contenu est fait comment ? pas à la main, car un style inline aurait résolu le problème
                j'ai pas compris ta question.

                Envoyé par ghazal Voir le message
                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 :
                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 :
                Code:
                <div class="dossier-block-qr dossier-block-qr-01">

                Commentaire


                • #9
                  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}
                  Dernière édition par lomart à 26/05/2018, 06h45
                  UP, le plugin universel à découvrir sur https//up.lomart.fr
                  bgMax
                  , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                  Commentaire


                  • #10
                    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
                    Artiste international, producteur phonographique et bidouilleur du web encore et toujours en activité.
                    Compositeur du groupe : Roses Street présent sur toutes les plateformes de steaming.
                    I'am happy for you !
                    Dernière réalisation : http://www.pierrickservais.com/

                    Commentaire


                    • #11

                      Envoyé par lomart Voir le message
                      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">)


                      Envoyé par lomart Voir le message
                      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..

                      Envoyé par papounet Voir le message
                      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.

                      Commentaire


                      • #12
                        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 :



                        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.
                        Dernière édition par ghazal à 26/05/2018, 10h45
                        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                        Commentaire


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

                          Commentaire

                          Annonce

                          Réduire
                          Aucune annonce pour le moment.

                          Partenaire de l'association

                          Réduire

                          Hébergeur Web PlanetHoster
                          Travaille ...
                          X