Selettore figlio immediato in MENO

112

È comunque possibile fare in modo che LESS applichi il selettore figlio immediato (>) nel suo output?

Nel mio style.less, voglio scrivere qualcosa del tipo:

.panel {
    ...
    > .control {
        ...
    }
}

e fai in modo che LESS generi qualcosa come:

.panel > .control { ... }

css css-selectors less

— Dave
fonte

stackoverflow.com/questions/7634932/less-js-strong-nested-rules

— thirtydot

15

In modo divertente, lo snippet della tua domanda era già la risposta giusta.

— trenta punti il

@thirtydot Certo, tranne per il fatto che non funziona ... non se non rimuovi lo spazio o aggiungi la "&". Sto usando less.js. Non posso dirlo con certezza per altri parser.

— Dave

2

Ho appena provato, e il codice originale dalla tua domanda lo fa lavorare in less.js. Guarda tu stesso: jsfiddle.net/thirtydot/vcE8t

— trentaduesimo

1

Sì, mi scuso, funziona come un fascino con lo spazio. +1 per te. Non so come non abbia funzionato per me ieri per ore ... altrimenti non avrei postato la domanda.

— Dave

144

AGGIORNARE

In realtà, il codice nella domanda originale funziona bene. Puoi semplicemente restare con il >selettore figlio.

Ho trovato la risposta.

.panel {
    ...
    >.control {
        ...
    }
}

Nota la mancanza di spazio tra ">" e ".", Altrimenti non funzionerà.

— Dave
fonte

4

Non dubiterei che sia un bug se non funziona con uno spazio lì, a meno che non sia specificamente documentato.

— BoltClock

Questo sta solo ingannando il parser. Lo vede come un singolo selettore, quindi ottieni .panel >.control.

— Ricardo Tomasi

Lo considero una caratteristica piuttosto che un bug. È molto più coerente quando lo usi in questo modo rispetto alla "&". Penso che sia più chiaro il codice se usi solo "&" con pseudo-classi e non classi figlie.

— Dave

1

È una funzionalità di CSS, che accetta sia div > pe div>p. La coerenza userebbe sempre lo spazio tra i selettori (dai un'occhiata al CSS generato).

— Ricardo Tomasi

Certo, ma ero più preoccupato per la coerenza dell'uso di &.

— Dave

78

Il modo ufficiale:

.panel {
  & > .control {
    ...
  }
}

& si riferisce sempre al selettore corrente.

Vedi http://lesscss.org/features/#features-overview-feature-nested-rules

— Ricardo Tomasi
fonte

1

Penso che anche questo stia solo ingannando il parser (come hai sentito per l'altra risposta). Lasciatemi spiegare. Come hai detto, & si riferisce sempre al selettore (genitore) corrente. Quindi qualunque cosa sia dopo dovrebbe applicarsi al genitore. E questo è il ruolo delle pseudo-classi. Le classi figlio immediate sono più vicine alle classi figlio **** gasp **** piuttosto che alle pseudo-classi. Quindi usare solo> è più intuitivo e logico.

— Dave

6

Cosa pensi sia più corretto? div > po div >p? Il &combinatore è il modo canonico di farlo in MENO, non i miei sentimenti. La tua spiegazione è retorica. Alcune persone scrivono il loro CSS in una sola riga ...

— Ricardo Tomasi

La maggior parte delle persone usa MENO, quindi non devono preoccuparsi del CSS effettivo che viene generato. Ad ogni modo, risulta che lo spazio può essere utilizzato dopo>. Quindi & è puramente ridondante.

— Dave

13

La sintassi corretta sarebbe seguire mentre si utilizza "&" sarebbe ridondante qui.

.panel{
   > .control{
   }
}

Secondo meno linee guida , '&' viene utilizzato per parametrizzare gli antenati (ma qui non è necessario tale bisogno). In questo esempio meno , &: hover è essenziale over : hover altrimenti risulterebbe in un errore sintattico. Tuttavia, non esiste tale requisito sintattico per l'utilizzo di "&" qui. In caso contrario, tutti gli annidamenti richiederebbero "&" poiché si riferiscono essenzialmente al genitore.

— sbharti
fonte

1

@JJF nessuna domanda perché è una risposta?

— Bill Woodger

0

Nel caso in cui sia necessario indirizzare più selettori:

.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}

— stojsins
fonte

-1

Inoltre, se si prendono di mira il primo elemento figlio, come ad esempio il primo <td>di una <tr>, si potrebbe usare qualcosa di simile a questo:

tr {
    & > td:first-child {font-weight:bold;}
}

questo aiuta a ridurre le dichiarazioni di classe quando non sono necessarie.

— seth yount
fonte