Natychmiastowy selektor dziecka w MNIEJ

112

Czy w ogóle ma LESS zastosować bezpośredni selektor potomny (>) w swoim wyjściu?

W moim stylu, bez, chcę napisać coś takiego:

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

i mają MNIEJ generować coś takiego:

.panel > .control { ... }

css css-selectors less

— Dave
źródło

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

— thirtydot

15

Co zabawne, fragment twojego pytania był już właściwą odpowiedzią.

— trzydzieści kropek

@thirtydot Jasne, ale to nie działa ... nie, jeśli nie usuniesz spacji lub nie dodasz znaku „&”. Używam less.js. Nie mogę tego powiedzieć na pewno dla innych parserów.

— Dave

2

Właśnie testowałem go, a oryginalny kod z pytaniem czy praca w less.js. Przekonaj się

— thirtydot

1

Tak, przepraszam, działa jak urok z przestrzenią. +1 dla Ciebie. Nie wiem, jak to nie działało wczoraj przez wiele godzin ... w przeciwnym razie nie opublikowałbym tego pytania.

— Dave

144

AKTUALIZACJA

W rzeczywistości kod z pierwotnego pytania działa dobrze. Możesz po prostu trzymać się >selektora podrzędnego.

Znalazłem odpowiedź.

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

Zwróć uwagę na brak spacji między „>” i „.”, W przeciwnym razie nie zadziała.

— Dave
źródło

4

Nie wątpiłbym, że to błąd, jeśli nie działa z tam spacją, chyba że jest to specjalnie udokumentowane.

— BoltClock

To tylko oszukanie parsera. Widzi go jako pojedynczy selektor, więc otrzymujesz .panel >.control.

— Ricardo Tomasi

Traktuję to raczej jako cechę niż błąd. Jest o wiele bardziej spójne, gdy używasz go w ten sposób, w przeciwieństwie do „&”. Myślę, że jest to bardziej przejrzysty kod, jeśli używasz „&” tylko z pseudoklasami, a nie z klasami podrzędnymi.

— Dave

1

Jest to funkcja CSS, która akceptuje zarówno div > pi div>p. Spójność polegałaby zawsze na użyciu spacji między selektorami (spójrz na wygenerowany CSS).

— Ricardo Tomasi

Jasne, ale bardziej interesowała mnie spójność używania &.

— Dave

78

Oficjalny sposób:

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

& zawsze odnosi się do bieżącego selektora.

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

— Ricardo Tomasi
źródło

1

Myślę, że to tylko oszukanie parsera (tak jak czułeś w przypadku drugiej odpowiedzi). Pozwól mi wyjaśnić. Jak powiedziałeś, & zawsze odnosi się do obecnego (rodzica) selektora. Więc cokolwiek jest po tym, powinno dotyczyć rodzica. I to jest rola pseudoklas. Bezpośrednie zajęcia dla dzieci są bliższe klasom podrzędnym **** gasp ****, a nie pseudoklasom. Dlatego używanie tylko> jest bardziej intuicyjne i logiczne.

— Dave

6

Jak myślisz, co jest bardziej poprawne? div > pczy div >p? &Syntezatora jest kanoniczny sposób to zrobić w mniej, nie moje uczucia. Twoje wyjaśnienie jest retoryczne. Niektórzy piszą swoje CSS w jednej linii ...

— Ricardo Tomasi

Większość ludzi używa LESS, więc nie muszą przejmować się faktycznym generowanym kodem CSS. W każdym razie okazuje się, że przestrzeń można wykorzystać po>. Więc & jest całkowicie zbędne.

— Dave,

13

Prawidłowa składnia byłaby następująca, podczas gdy użycie „&” byłoby tutaj zbędne.

.panel{
   > .control{
   }
}

Zgodnie z mniejszymi wytycznymi „&” służy do parametryzacji przodków (ale nie ma takiej potrzeby). W tym mniej przykład , i: hover jest niezbędna przez : hover inaczej byłoby to spowodować składniowej błędu. Jednak nie ma takiego wymogu składniowego przy użyciu znaku „&” w tym miejscu. W przeciwnym razie wszystkie zagnieżdżenia wymagałyby znaku „&”, ponieważ zasadniczo odnoszą się do rodzica.

— sbharti
źródło

1

@JJF bez pytania, bo to odpowiedź?

— Bill Woodger

0

Jeśli chcesz skierować reklamy do większej liczby selektorów:

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

— stojsins
źródło

-1

Ponadto, jeśli celujesz w pierwszy element podrzędny, taki jak pierwszy element <td>a <tr>, możesz użyć czegoś takiego:

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

pomaga to zredukować deklaracje klas, gdy nie są potrzebne.

— seth yount
źródło