first:child:not(.class) selector

**jimbo0** · 23-05-2017, 13:07

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'è

**KillerWorm** · 23-05-2017, 14:39

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.

**jimbo0** · 23-05-2017, 18:17

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.

**jimbo0** · 23-05-2017, 18:29

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

**Fix87** · 01-06-2017, 22:26

Originariamente inviata da jimbo0

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%!

**jimbo0** · 01-06-2017, 23:15

Originariamente inviata da Fix87

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/

Discussione: first:child:not(.class) selector

Strumenti discussione

Ricerca discussione

Visualizza

first:child:not(.class) selector

Permessi di invio