Anonyme
Anonyme a posé la question dans Informatique et internetProgrammation · il y a 1 mois

En CSS, est-il possible de faire un display: none; sur un seul élément alors que 2 portent le même nom?

Par exemple uniquement sur le dernier qui est en bas de page.

2 réponses

Évaluation
  • oyubir
    Lv 6
    il y a 1 mois
    Meilleure réponse

    Qu'appelez-vous "porter le même nom" ?

    Si vous parlez d'id, il n'y a par définition qu'un seul élément portant cet ID. Bien sur, quand vous en mettez 2, le monde ne s'écroule pas, et la page continue en gros de fonctionner. Mais enfin, la norme ne dit pas ce qui se passe quand on essaye de désigner un élément par ID, alors qu'ils sont plusieurs à partager le même. Pas même dans le cas où c'est non ambigu.

    Par exemple

    <div id=un>

    <span id=zero>1</span>

    </div>

    <div id=deux>

    <span id=zero>2</span>

    </div>

    #deux #zero {

    background-color:red;

    }

    La norme ne dit absolument pas ce qui se passe dans ce cas.

    Parce que la question n'est pas censée se poser.

    Je parierais que la plupart des navigateurs coloreront en rouge le 2.

    Mais ils pourraient aussi n'en colorer aucun (par exemple s'ils abandonnent la recherche d'éléments qui collent dès qu'ils ont vu le 1er., vu que la norme dit qu'il ne peut pas y avoir de 2e.

    Ceci étant dit, oui, vous pouvez toujours de toutes façon désigner un élément précis, sans même se baser su un ID ou une classe.

    div:nth-child(1) > span

    désigne le 1er span ici

    div:nth-child(2) > spah

    désigne le 2e.

    Mais la seule raison valable que je vois de faire ça, c'est pour écrire un userscript.Cad une situation dans laquelle vous voulez modifier le style d'une page que vous n'avez pas la possibilité de modifier

    AJOUT suite à vos commentaires

    Dans ce contexte particulier (vous ne pouvez pas ajouter de classe, et rien ne semble discriminer les 2 toolbar, hormis le fait que l'une est avant l'autre), je confirme que c'est bien nth-child votre porte de sortie.

    Mais vous l'utilisez mal

    div.toolbar-sorter.sorter:nth-child(2) { display: none; }

    signifie que vous cachez le div.toolbar-sorter.sorter qui est le 2e fils de son parent.

    C'est le cas des 2, a priori, puisque les 2 toolbars sont à peu près faites pareil.

    (concrètement, les 2 sont fils d'un div.toolbar-product, et sont précisément le 2e fils ; le 1er étant à chaque fois un <p>

    Ce que vous devez faire, c'est utiliser nth-child pour sélectionner  le div.toolbar qui est ancêtre du toolbar sorter

    qqc comme

    div.xxx:nth-child(2) div.toolbar-sorter.sorter { display: none; }

    Cad que vous cachez le div.toolbar-sorter qui est descendant d'un div.xxx, qui lui même est le 2e fils de son père

    Comme vous ne donnez pas l'intégralité du code, je ne sais pas où est l'embranchement qui sépare les 2 toolbars (quel est le père, dont le xième fils est l'ancètre de seulement la 1re toolbar, et le yième fils (y≠x) est l'ancètre de seulement la 2e toolbar. Mais c'est au niveaux des fils de ce père que vous devez utilisez nth-child

    REMARQUE

    Dans votre code, partiel, le vois que le contenant de la 2e toolbar est de classe toolbar-bottom

    Je ne sais pas si le contenant de la 1re toolbar a une classe différente (puisque vous avez coupé le code là), mais vu que dans les commentaires vous appelez la première "toolbar du haut", et la 2e "toolbar du bas", je ne serais pas surpris outre mesure d'apprendre que la 1re toolbar est contenue dans un div.toolbar-top !

    Auquel cas vous n'avez absolument pas besoin de nth-child. Vous avez votre classe qui discrimine les 2.

    Je me demande si le problème n'est pas simplement que vous ne savez pas utilisez les relation de parenté dans un code CSS

    div.A  div.B {...}

    désigne tout div.B qui est héritier (direct ou indirect) d'un div.A

    Ici, si j'infère correctement ce qu'est la partie du code que vous ne nous avez pas montrée, la solution est donc ultra simple (et même propre, contrairement à une solution à base de nth-child qui serait cassée à la première future modif)

    div.toolbar-bottom  div.toolbar-sorter { display: none; }

    div.toolbar-bottom  div.limiter { display: none; }

    Vous cachez le (les, mais il n'y en a qu'un) div.toobar-sorter qui est contenu dans un div.toolbar-bottom

    • il y a 4 semainesSignaler

      Je viens de comprendre pourquoi ça fonctionne, la barre du bas a la classe toolbar-bottom, ce qui permet de l'identifier avec du CSS. Cette expérience me servira de leçon.

  • il y a 1 mois

    oui, donne-lui une classe

    ( et pour des QR programmation, essaye https://stackoverflow.com/questions si ce n'est déjà fait )

    • il y a 4 semainesSignaler

      oyubir a trouvé la solution

Vous avez d’autres questions ? Pour obtenir des réponses, posez vos questions dès maintenant.