Pytanie Czy istnieje selektor nadrzędny CSS?


Jak wybrać <li> element będący bezpośrednim elementem macierzystym elementu kotwiącego?

Na przykład mój CSS mógłby wyglądać tak:

li < a.active {
    property: value;
}

Oczywiście są sposoby na to w JavaScript, ale mam nadzieję, że istnieje jakieś obejście, które istnieje w CSS Level 2.

Menu, które próbuję ustawić, jest wypluwane przez CMS, więc nie mogę przenieść aktywnego elementu do <li> element ... (chyba że tematem jest moduł do tworzenia menu, którego nie powinienem robić).

Jakieś pomysły?


2516
2018-06-18 19:59


pochodzenie


W rzeczywistości nie pożyczałem od dokumentów jQuery, próbowałem tylko zilustrować element, który próbuję wybrać. Twoja sugestia wybrałaby wszystkie dzieci znaczka li (patrz w3.org/TR/CSS2/selector.html) - jcuenod
Więcej dyskusji na temat tego problemu na stackoverflow.com/questions/45004/... - MatrixFrog
@Tomas li> a.active wybiera dziecko, a nie rodzica. - Stewart
Interesujące jest to, że pytanie @MatrixFrog prowadzi do tej strony w "To pytanie już ma odpowiedź" ... - Agi Hammerthief
Czy są jakieś aktualizacje tego pytania? Sądzę, że ostatnia zapisana korespondencja w tej sprawie miała miejsce w marcu 2014 r. Co z tego? - Master Yoda


Odpowiedzi:


Obecnie nie ma możliwości wybrania elementu nadrzędnego elementu w CSS.

Jeśli istnieje sposób, aby to zrobić, będzie to jedna z aktualnych specyfikacji selektorów CSS:

W międzyczasie musisz wybrać JavaScript, jeśli chcesz wybrać element nadrzędny.


The Selectors Level 4 Working Draft obejmuje :has() pseudo-klasa, która działa tak samo jak implementacja jQuery. Od 2018 roku to wciąż nie jest obsługiwane przez żadną przeglądarkę.

Za pomocą :has() oryginalne pytanie może zostać rozwiązane w ten sposób:

li:has(> a.active) { /* styles to apply to the li tag */ }

2013
2018-06-18 20:16



Wydaje się, że już zostało to zasugerowane i odrzucone: stackoverflow.com/questions/45004/... - RobM
Wygląda jak selektor tematów została ponownie odwiedzona, z wyjątkiem użycia a ! teraz: The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector. - animuson♦
Wcześniejsze $ wyglądał lepiej dla mnie ... dołączony ! można łatwiej przeoczyć. - Christoph
Wielki zwrot akcji! The Selectors 4 WD został właśnie zaktualizowany dzisiaj aby wykluczyć wskaźnik tematu z szybkiego profilu, który ma być używany przez implementacje CSS. Jeśli ta zmiana pozostanie, oznacza to, że nie będziesz już mógł używać wskaźnika tematu w arkuszach stylów (chyba że użyjesz dodaj polyfill jak ten opisany w kolejna odpowiedź) - możesz go używać tylko z Selectors API i wszędzie, gdzie można zaimplementować pełny profil. - BoltClock♦
Kolejna ważna aktualizacja: wygląda na to, że rozważają rezygnację ze składni selektora tematycznego i zastąpienie jej :has() pseudo wszyscy poznali i kochali z jQuery. Najnowszy ED usunął wszystkie odniesienia do wskaźnika tematu i zastąpił go wskaźnikiem :has() rzekomy. Nie znam dokładnych powodów, ale CSSWG przeprowadził ankietę jakiś czas temu, a wyniki musiały wpłynąć na tę decyzję. Najprawdopodobniej jest to zgodne z jQuery (aby można było korzystać z qSA bez modyfikacji), a składnia wskaźnika tematu okazała się zbyt myląca. - BoltClock♦


Nie sądzę, że możesz wybrać rodzica tylko w css.

Ale jak już wydaje się, że masz .active klasy, czy nie byłoby łatwiej przenieść tę klasę do li (zamiast tego a)? W ten sposób uzyskasz dostęp do obu li i a tylko przez css.


120
2018-06-18 20:08



Nie można przesunąć pseudo selektora do elementu listy, ponieważ nie jest elementem aktywowanym. Używa: selektora aktywnego, więc gdy kotwica jest aktywna, chce wpłynąć na element listy. Elementy listy nigdy nie będą w stanie aktywnym. Na marginesie, to niefortunne, że taki selektor nie istnieje. Uzyskanie czystego menu CSS, aby uzyskać pełną dostępną klawiaturę, wydaje się niemożliwe bez niego (za pomocą selektorów rodzeństwa można tworzyć podmenu utworzone przy użyciu list zagnieżdżonych, ale gdy lista zyskuje ostrość, staje się ponownie ukryta). Jeśli istnieją jakieś rozwiązania tylko CSS dla tego konkretnego conun
@ Dominic Aquilina Spójrz na pytanie, OP używa klasy, a nie pseudo selektora. - jeroen


Możesz tego użyć scenariusz.

*! > input[type=text] { background: #000; }

Spowoduje to wybranie dowolnego elementu macierzystego wpisu tekstowego. Ale poczekaj, wciąż jest o wiele więcej. Jeśli chcesz, możesz wybrać określonego rodzica:

.input-wrap! > input[type=text] { background: #000; }

lub wybierz go, gdy jest aktywny:

.input-wrap! > input[type=text]:focus { background: #000; }

Sprawdź ten kod HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

możesz to wybrać span.help kiedy input jest aktywny i pokaż go:

.input-wrap! .help > input[type=text]:focus { display: block; }

Istnieje wiele innych możliwości; po prostu sprawdź dokumentację wtyczki.

BTW, działa w IE.


100
2017-08-13 10:13



załóżmy, że używamy jquery patent() byłaby szybsza. To jednak wymaga testowania - Dan
@Idered Nie powiedzie się, gdy masz deklarację CSS podmiotu selektora bez selektora podrzędnego (#a! sam rzuca błąd, #a! p działa), a więc inni nie będą działać z powodu Uncaught TypeError: Cannot call method 'split' of undefined: widzieć jsfiddle.net/HerrSerker/VkVPs - HerrSerker
@HerrSerker Myślę, że #a! jest nieprawidłowym selektorem, co powinien wybrać? - Idered
@Idered Nie wiem. Specyfikacja nie mówi, że jest nielegalna. #za! powinien sam się wybrać. Przynajmniej ich nie powinno być błędu w JavaScript - HerrSerker
Zgodnie z moim komentarzem dotyczącym zaakceptowanej odpowiedzi wygląda na to, że polyfill może być wymagany nawet w niedalekiej przyszłości, ponieważ wskaźnik treści może nigdy nie zostać zaimplementowany przez przeglądarki w CSS. - BoltClock♦


Jak wspomniano przez kilka innych, nie ma sposobu, aby styl elementu nadrzędnego elementu za pomocą tylko CSS, ale następujące działa z jQuery:

$("a.active").parents('li').css("property", "value");

75
2017-12-14 14:51



The < selektor nie istnieje (zweryfikowano przy użyciu jQuery 1.7.1). - Rob W
Być może to <-syntax pracował w 2009 roku, ale zaktualizowałem go (na rok 2013). - Alastair
Nawet lepiej, użyj wbudowanego jQuery :has() selektor: $("li:has(a.active)").css("property", "value");. Brzmi podobnie do proponowanych CSS 4 ! selektor. Zobacz też: :parent selektor, .parents() metoda, .parent() metoda. - Rory O'Kane
I zamiast używać .css("property", "value") w stylu wybranych elementów zwykle powinieneś .addClass("someClass") i masz w swoim CSS .someClass { property: value } (przez). W ten sposób możesz zapisać styl z pełną mocą CSS i dowolnych preprocesorów, z których korzystasz. - Rory O'Kane


Nie ma selektora nadrzędnego; po prostu nie ma poprzedniego selektora rodzeństwa. Jednym z ważnych powodów braku tych selektorów jest to, że przeglądarka musi przejść przez wszystkie elementy podrzędne w celu ustalenia, czy klasa powinna zostać zastosowana. Na przykład, jeśli napisałeś:

body:contains-selector(a.active) { background: red; }

Wtedy przeglądarka będzie musiała poczekać, aż załaduje i przetworzy wszystko, aż do </body> aby ustalić, czy strona powinna być czerwona, czy nie.

Ten artykuł Dlaczego nie mamy selektora nadrzędnego wyjaśnia to szczegółowo.


44
2018-01-21 08:43



więc spraw, aby przeglądarka była szybsza. sam Internet jest szybszy. ten selektor jest zdecydowanie potrzebny, a powodem jego niewdrożenia jest, niestety, życie w powolnym, prymitywnym świecie. - vsync
w rzeczywistości selektor spowolniłby bardzo szybką przeglądarkę. - Salman A
Ufam, że twórcy przeglądarek wymyśliliby implementację, która jest (przynajmniej) tak szybka, jak wersja javascript, której i tak ludzie używają. - Marc.2377


nie ma sposobu, aby to zrobić w css2. możesz dodać klasę do li i odwołać się do a

li.active > a {
    property: value;
}

39
2018-06-18 20:06



poprzez wyświetlanie elementu: blok możesz go dopasować do całego obszaru li. jeśli potrafisz wyjaśnić, jakiego stylu szukasz, to mógłbym pomóc w rozwiązaniu problemu. - Josh
jest to w rzeczywistości proste i eleganckie rozwiązanie iw wielu przypadkach ma sens ustawienie klasy na rodzica. - Ricardo


Selektor CSS "Ogólny kombinator rodzeństwa"Może być wykorzystane do tego, co chcesz:

E ~ F {
    property: value;
}

To pasuje do dowolnego F element poprzedzony znakiem E element.


26
2018-06-30 14:00



To nie jest poprawna odpowiedź, ale dziękuję za przypomnienie nam o tym selektorze - Dan
To tylko selektor dla rodzeństwa, to nie jest dziecko, rodzic ... nie odpowiada na pytanie partnera - Alireza


Spróbuj się przełączyć a do block wyświetlić, a następnie użyć dowolnego stylu, który chcesz. aelement wypełni li element i będziesz mógł modyfikować jego wygląd, jak chcesz. Nie zapomnij ustawić li dopełnienie do 0.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

24
2017-11-23 09:03