Sofortige Kinderauswahl in WENIGER

112

Gibt es sowieso WENIGER, um den unmittelbaren untergeordneten Selektor (>) in seiner Ausgabe anzuwenden?

In meinem Stil möchte ich so etwas schreiben wie:

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

und WENIGER etwas erzeugen lassen wie:

.panel > .control { ... }
css css-selectors less Dave
quelle
stackoverflow.com/questions/7634932/less-js-strong-nested-rules
dreißig Punkte
15
Amüsanterweise war der Ausschnitt in Ihrer Frage bereits die richtige Antwort.
dreißig Punkte
@thirtydot Sicher, außer dass es nicht funktioniert ... nicht, wenn Sie das Leerzeichen nicht entfernen oder das "&" hinzufügen. Ich benutze less.js. Kann ich für andere Parser nicht sicher sagen.
Dave
2
Ich habe es gerade getestet und der ursprüngliche Code aus Ihrer Frage funktioniert in less.js. Überzeugen
Sie sich
1
Ja, ich entschuldige mich, es funktioniert wie ein Zauber mit dem Raum. +1 für dich. Ich weiß nicht, wie es gestern stundenlang bei mir nicht funktioniert hat ... sonst hätte ich die Frage nicht gestellt.
Dave

Antworten:

144

AKTUALISIEREN

Tatsächlich funktioniert der Code in der ursprünglichen Frage einwandfrei. Sie können einfach bei der >untergeordneten Auswahl bleiben .

Habe die Antwort gefunden.

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

Beachten Sie den Platzmangel zwischen ">" und ".", Andernfalls funktioniert es nicht.

Dave
quelle
4
Ich würde nicht bezweifeln, dass es ein Fehler ist, wenn es dort nicht mit einem Leerzeichen funktioniert, es sei denn, es ist speziell dokumentiert.
BoltClock
Dies täuscht nur den Parser. Es sieht es als einen einzelnen Selektor, so dass Sie bekommen .panel >.control.
Ricardo Tomasi
Ich nehme es eher als Feature als als Bug. Es ist viel konsistenter, wenn Sie es auf diese Weise verwenden, im Gegensatz zum "&". Ich denke, es ist klarer Code, wenn Sie "&" nur mit Pseudoklassen und nicht mit untergeordneten Klassen verwenden.
Dave
1
Es ist eine Funktion von CSS, die sowohl div > pals auch akzeptiert div>p. Konsistenz würde immer Leerzeichen zwischen Selektoren verwenden (sehen Sie sich das generierte CSS an).
Ricardo Tomasi
Sicher, aber ich war mehr besorgt über die Konsistenz der Verwendung von &.
Dave
78

Der offizielle Weg:

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

& bezieht sich immer auf den aktuellen Selektor.

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

Ricardo Tomasi
quelle
1
Ich denke, das täuscht auch nur den Parser (wie Sie sich über die andere Antwort gefühlt haben). Lassen Sie mich erklären. Wie Sie sagten, bezieht sich & immer auf den aktuellen (übergeordneten) Selektor. Was auch immer danach ist, sollte für die Eltern gelten. Und das ist die Rolle der Pseudoklassen. Sofortige Kinderklassen sind eher Kinderklassen als Pseudoklassen. Die Verwendung von just> ist also intuitiver und logischer.
Dave
6
Was denkst du ist richtiger? div > poder div >p? Der &Kombinator ist die kanonische Art, es WENIGER zu tun, nicht meine Gefühle. Ihre Erklärung ist rethorisch. Einige Leute schreiben ihr CSS in einer einzigen Zeile ...
Ricardo Tomasi
Die meisten Leute verwenden WENIGER, damit sie sich nicht um das tatsächliche CSS kümmern müssen, das generiert wird. Wie auch immer, es stellt sich heraus, dass Speicherplatz nach> verwendet werden kann. Also & ist rein überflüssig.
Dave
13

Die korrekte Syntax bei Verwendung von '&' wäre hier überflüssig. 

.panel{
   > .control{
   }
}

Nach weniger Richtlinien wird '&' verwendet, um Vorfahren zu parametrisieren (aber hier besteht keine solche Notwendigkeit). In diesem Beispiel ist &: hover über : hover wichtig, da dies sonst zu syntaktischen Fehlern führen würde. Es gibt jedoch keine solche syntaktische Anforderung für die Verwendung von '&' hier. Andernfalls würden alle Verschachtelungen '&' erfordern, da sie sich im Wesentlichen auf übergeordnete Elemente beziehen.

sbharti
quelle
1
@JJF keine Frage, weil es eine Antwort ist?
Bill Woodger
-1

Wenn Sie auf das erste untergeordnete Element abzielen, z. B. das erste <td>von a <tr>, können Sie Folgendes verwenden:

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

Dies hilft, Klassendeklarationen zu reduzieren, wenn sie nicht benötigt werden.

Seth Yount
quelle