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

    Itsas Arima est une association dont l’objectif principal est de développer un programme de suivi des populations de mammifères marins des côtes basques et landaises.

  • #2
    Bonjour,

    Cela doit marcher. Il doit y avoir une autre erreur
    https://jsfiddle.net/puayqLoL/
    Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
    ---
    UP, un plugin "couteau suisse" à 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.

      Itsas Arima est une association dont l’objectif principal est de développer un programme de suivi des populations de mammifères marins des côtes basques et landaises.

      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
        Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
        ---
        UP, un plugin "couteau suisse" à 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

          Itsas Arima est une association dont l’objectif principal est de développer un programme de suivi des populations de mammifères marins des côtes basques et landaises.

          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
            Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
            ---
            UP, un plugin "couteau suisse" à 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 :
              https://codepen.io/ghazalp/pen/pVXBMG

              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 le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

              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 :
                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 :
                Code:
                <div class="dossier-block-qr dossier-block-qr-01">

                Itsas Arima est une association dont l’objectif principal est de développer un programme de suivi des populations de mammifères marins des côtes basques et landaises.

                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
                  Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                  ---
                  UP, un plugin "couteau suisse" à 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
                    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.

                      Itsas Arima est une association dont l’objectif principal est de développer un programme de suivi des populations de mammifères marins des côtes basques et landaises.

                      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 :

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

                        Commentaire


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

                          Itsas Arima est une association dont l’objectif principal est de développer un programme de suivi des populations de mammifères marins des côtes basques et landaises.

                          Commentaire

                          Annonce

                          Réduire
                          1 sur 2 < >

                          C'est [Réglé] et on n'en parle plus ?

                          A quoi ça sert ?
                          La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                          Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                          Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                          Comment ajouter la mention [Réglé] à votre discussion ?
                          1 - Aller sur votre discussion et éditer votre premier message :


                          2 - Cliquer sur la liste déroulante Préfixe.

                          3 - Choisir le préfixe [Réglé].


                          4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                          2 sur 2 < >

                          Assistance au forum - Outil de publication d'infos de votre site

                          Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                          Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                          Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                          UTILISER À VOS PROPRES RISQUES :
                          L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                          Problèmes connus :
                          FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                          Installation :

                          1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                          Archive zip : https://github.com/AFUJ/FPA/zipball/master

                          2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                          3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                          4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                          5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                          6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                          et remplacer www. votresite .com par votre nom de domaine


                          Exemples:
                          Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/
                          Pour executer le script: http://www..com/fpa-fr.php

                          Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/cms/
                          Pour executer le script: http://www..com/cms/fpa-fr.php

                          En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                          Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                          Voir plus
                          Voir moins
                          Travaille ...
                          X