Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    590

    first:child:not(.class) selector

    Ho una lista di div con bordi:
    codice HTML:
    <div class="container">
    <div class="item hide">1</div>
    <div class="item hide">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    </div>
    Questo è il css:
    codice:
    .item {border:1px solid #000}
    .hide{display:none}
    .container div:not(.hide):first-child {border:none}
    alcuni .item sono nascosti dinamicamente. Vorrei eliminare il bordo al primo item visibile, qualunque esso sia. La terza riga di css non funge così com'è

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,755
    La pseudo classe :first-child tiene conto solamente della caratteristica gerarchica degli elementi in questione, per cui va a selezionare il primo tra gli elementi figli, a prescindere dalle classi ad essi applicate (o non applicate).
    Quindi, in questo caso, quel :not(.hide) non ha alcun valore ai fini della selezione effettuata dal :first-child, che va a selezionare comunque il primo figlio dell'elemento contenitore; anzi con quel :not() sarà addirittura escluso, dalla selezione, anche quel primo figlio perché appunto ha applicata la classe .hide.
    Morale della favola: quel selettore non selezionerà alcunché in un caso del genere.

    Per come l'hai impostata, ti ci vorrebbe un selettore del tipo :first-of-class, il quale attualmente non esiste.

    Si può comunque risolvere diversamente per ottenere ciò che hai chiesto.
    Esempio:
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style type="text/css">
          .container .item:not(.hide)+.item /* questo applica il bordo solo a .item 4 e quelli seguenti */
          /*,.container .item.hide*/ /* decommenta questo se ti serve che anche gli .hide abbiano il bordo */
          {border:1px solid #000}
          
          .hide{display:none}
        </style>
      </head>
      <body>
        <div class="container">
          <div class="item hide">1</div>
          <div class="item hide">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
        </div>
      </body>
    </html>
    Chiaramente questo è valido per l'esempio che tu stesso hai riportato, ma potrebbe non essere adatto in altri casi.
    Supponiamo ad esempio questo:
    codice:
    <div class="container">
      <div class="item hide">1</div>
      <div class="item hide">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item hide">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
    </div>
    Il bordo è applicato ai div 4 e 7, perché sono considerati quelli che seguono un .item dopo qualsiasi .hide. Restano quindi esclusi il 3 e il 6. Infatti, ovviamente, il 3 non è il solo primo .item dopo un qualsiasi .hide, ma dalle tue indicazioni non è chiaro se puoi avere delle situazioni in cui gli .hide siano sparsi oppure puoi averli solo come elementi iniziali.

    Vedi un po' se è sufficiente come soluzione, altrimenti chiarisci meglio specificando eventuali altre situazioni che ti si possono presentare e fornendo tutti i dettagli del caso.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    590
    purtroppo non so se la lista comincia con .item.hide o .item, mi sa che la tua soluzione non va nel caso la lista cominci un item visibile.
    Semplicemente gli item sono mischiati.

  4. #4
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    590
    ho trovato una soluzione alternativa completamente scorrelata, ma che posto comunque nello spirito del forum
    In realtà il progetto è in Ionic1, quindi Angularjs(1).
    Quella classe .hide in realtà è .ng-hide, che Angular applica quando la condizione di ng-show è falsa.
    Il problema di ng-show è che lascia l'elemento nascosto nel DOM applicandogli appunto la classe .ng-hide. Sostituendo la direttiva ng-show con ng-if, l'elemento che non soddisfa la condizione non viene nascosto ma viene rimosso dal DOM, risolvendo di fatto il problema e lasciandomi libero uso di :first-child.
    Resta da capire se ho appesantito la computazione

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    255
    Quote Originariamente inviata da jimbo0 Visualizza il messaggio
    Resta da capire se ho appesantito la computazione
    Se non ricordo male hai addirittura alleggerito la computazione.

    Questo perché ng-show/ng-hide hanno dei watchers attivi per rimanere in ascolto su eventuali cambiamenti del modello dei dati.
    Con ng-if invece il controllo viene fatto soltanto durante il rendering del DOM, dopodichè scompare.

    Ripeto non ne sono sicuro al 100%, diciamo al 90%!

  6. #6
    Utente di HTML.it
    Registrato dal
    Oct 2011
    Messaggi
    590
    Quote Originariamente inviata da Fix87 Visualizza il messaggio
    Se non ricordo male hai addirittura alleggerito la computazione.

    Questo perché ng-show/ng-hide hanno dei watchers attivi per rimanere in ascolto su eventuali cambiamenti del modello dei dati.
    Con ng-if invece il controllo viene fatto soltanto durante il rendering del DOM, dopodichè scompare.

    Ripeto non ne sono sicuro al 100%, diciamo al 90%!
    non è proprio così, se la condizione dell'ng-if diventa true l'elemento appare, quindi il watcher esiste comunque (com'è abbastanza ovvio).
    Qui c'è un articolo che cmq spiega che è preferibile ng-if rispetto a ng-show
    http://www.codelord.net/2015/07/28/a...show-vs-ng-if/
    Ultima modifica di jimbo0; 01-06-2017 a 23:22

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.