Czy istnieje selektor nadrzędny CSS?

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

Ale ponieważ wydaje się, że masz już .active klasę, łatwiej byłoby przenieść tę klasę do li (zamiast a). W ten sposób możesz uzyskać dostęp zarówno do li, jak i a tylko za pomocą CSS.

Tak: :has()

Obsługa przeglądarki: Brak

Możesz użyć tego skryptu :

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

Spowoduje wybranie dowolnego rodzica wejścia tekstu. Ale czekaj, jest jeszcze o wiele więcej. Jeśli chcesz, możesz wybrać określony rodzic:

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

Lub wybierz go, gdy jest aktywny:

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

Zobacz ten HTML:

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

Możesz wybrać, że span.help Gdy input jest aktywny i pokazać go:

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

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

BTW, to działa w Internet Explorer.

Jak wspomniano przez kilku innych, nie ma sposobu na stylizację rodzica / s elementu za pomocą CSS, ale następujące elementy działają z jQuery :

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

Nie ma selektora rodzicielskiego; tak jak nie ma selektora poprzedniego rodzeństwa. Dobrym powodem braku tych selektorów jest to, że przeglądarka musi przejść przez wszystkie dzieci elementu, aby określić, czy klasa powinna być zastosowana. Na przykład, jeśli napisałeś:

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

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

Artykuł Dlaczego nie mieć selektor rodzica wyjaśnia to szczegółowo.

Nie ma sposobu, aby to zrobić w CSS 2. Możesz dodać klasę do li i odwołać się do a:

li.active > a {
    property: value;
}

Spróbuj przełączyć a na block wyświetlacz, a następnie użyj dowolnego stylu. Element {[1] } wypełni element li, a Ty będziesz mógł modyfikować jego wygląd tak, jak chcesz. Nie zapomnij ustawić li padding na 0.

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

Selektor CSS "General Sibling Combinator " może być użyty do tego, co chcesz:

E ~ F {
    property: value;
}

Pasuje do dowolnego elementu F, który jest poprzedzony elementem E.

Pseudo element :focus-within pozwala na wybranie rodzica, jeśli potomek ma focus.

Element może być skupiony, jeśli ma atrybut tabindex.

Obsługa przeglądarki dla focus-within

Tabindex

Przykład

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}

<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>

Nie w CSS 2 z tego co mi wiadomo. CSS 3 ma bardziej rozbudowane selektory, ale nie jest konsekwentnie implementowany we wszystkich przeglądarkach. Nawet z ulepszonymi selektorami, nie wierzę, że osiągnie to dokładnie to, co podałeś w swoim przykładzie.

Wiem, że OP szukał rozwiązania CSS, ale jest to proste do osiągnięcia przy użyciu jQuery. W moim przypadku musiałem znaleźć znacznik rodzica <ul> dla znacznika <span> zawartego w dziecku <li>. jQuery ma selektor :has, więc możliwe jest zidentyfikowanie rodzica przez dzieci, które zawiera:

$("ul:has(#someId)")

Wybierze ul element, który ma element potomny o id someId. Aby odpowiedzieć na oryginalne pytanie, coś w rodzaju poniższego powinno zrobić sztuczkę (nieprzetestowane):

$("li:has(.active)")

Jest to najbardziej dyskutowany aspekt specyfikacji selektorów poziomu 4 . Dzięki temu selektor będzie mógł stylizować element zgodnie z jego potomkiem za pomocą wykrzyknika po podanym selektorze (!).

Na przykład:

body! a:hover{
   background: red;
}

Ustawi czerwony kolor tła, jeśli użytkownik znajdzie się nad którąkolwiek kotwicą.

Ale musimy poczekać na implementację przeglądarek: (

Możesz spróbować użyć hiperłącza jako rodzica, a następnie zmienić wewnętrzne elementy po najechaniu kursorem. Tak:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

W ten sposób możesz zmienić styl w wielu wewnętrznych znacznikach, na podstawie najazdu elementu nadrzędnego.

Oto hack używając pointer-events z hover:

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
/* accessory */
.parent {
    width: 200px;
    height: 200px;
    background: gray;
}
.parent, 
.selector {
    display: flex;
    justify-content: center;
    align-items: center;
}
.selector {
    cursor: pointer;
    background: silver;
    width: 50%;
    height: 50%;
}
        </style>
        <style>
/* pertinent */
.parent {
    background: gray;
    pointer-events: none;
}
.parent:hover {
    background: fuchsia;
}
.parent 
.selector {
    pointer-events: auto;
}
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="selector"></div>
        </div>
    </body>
</html>

Tylko pomysł na menu poziome...

Część HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

Część CSS

/* Hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

Zaktualizowane demo i reszta kodu

Inny przykład Jak używać go z text-input-select parent fieldset

Obecnie nie ma selektora nadrzędnego i nie jest on nawet omawiany w żadnym z rozmów W3C. musisz zrozumieć, jak CSS jest oceniany przez przeglądarkę, aby właściwie zrozumieć, czy tego potrzebujemy, czy nie.

Jest tu wiele technicznych wyjaśnień.

Jonathan Snook wyjaśnia jak CSS jest oceniany .

Chris Coyier o rozmowach selekcjonera rodziców .

Harry Roberts znowu o pisaniu efektywnych selektorów CSS .

Ale Nicole Sullivan ma kilka interesujących faktów na temat pozytywnych trendów .

Ci ludzie są najwyższej klasy w dziedzinie rozwoju front end.

Istnieje wtyczka, która rozszerza CSS o niestandardowe funkcje, które mogą naprawdę pomóc przy projektowaniu stron internetowych. Nazywa się EQCSS .

Jedną z rzeczy dodanych przez EQCSS jest selektor nadrzędny. Działa we wszystkich przeglądarkach, Internet Explorer 8 i nowszych. Oto format:

@element 'a.active' {
  $parent {
    background: red;
  }
}

Więc tutaj otworzyliśmy Zapytanie o każdy element a.active, A Dla stylów wewnątrz tego zapytania, rzeczy takie jak $parent mają sens, ponieważ istnieje punkt odniesienia. Przeglądarka może znaleźć rodzica, ponieważ jest bardzo podobny do parentNode w JavaScript.

Oto demo $parent i kolejne demo $parent, które działa w Internet Explorer 8, a także zrzut ekranu w przypadku, gdy nie masz Internet Explorer 8 do przetestowania z.

EQCSS zawiera również meta-selektory: $prev dla elementu przed zaznaczonym elementem i $this Dla tylko tych elementów, które pasują do zapytania elementu i więcej.

Jest teraz 2019, a najnowszy szkic modułu zagnieżdżania CSS ma coś takiego. Wprowadzenie @nest at-rules.

3.2. Nesting At-Rule: @nest

Podczas gdy bezpośrednie zagnieżdżanie wygląda ładnie, jest nieco kruche. Niektóre ważne selektory zagnieżdżania, jak .foo&, są niedozwolone, a edytowanie selektora w określony sposób może nieoczekiwanie unieważnić regułę. Również niektórzy uważają gniazdowanie za trudne do wizualnego odróżnienia od otaczającego deklaracje.

Aby pomóc w tych wszystkich problemach, ta specyfikacja definiuje regułę @nest, która nakłada mniej ograniczeń na sposób poprawnego zagnieżdżania reguł stylu. Jego składnia to:

@nest = @nest <selector> { <declaration-list> }

Reguła @nest działa identycznie jak reguła stylu: zaczyna się od selektora i zawiera deklaracje, które odnoszą się do elementów, które selektor pasuje. Jedyną różnicą jest to, że selektor używany w regule @nest musi zawierać nest, co oznacza, że zawiera w sobie selektor zagnieżdżania gdzieś. Lista selektorów jest nest-containing, jeśli wszystkie jej pojedyncze selektory złożone są Nest-containing.

(Skopiuj i wklej z powyższego adresu URL).

Przykład poprawnych selektorów zgodnie z niniejszą specyfikacją:

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */

Technicznie nie ma na to bezpośredniego sposobu. Możesz to jednak rozwiązać za pomocą jQuery lub JavaScript.

Jednak, można zrobić coś takiego, jak również.

a.active h1 {color: blue;}
a.active p {color: green;}

JQuery

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

Jeśli chcesz to osiągnąć używając jQuery tutaj jest odniesienie do selektora rodzica jQuery .

Krótka odpowiedź brzmi NO ; nie mamy parent selector na tym etapie w CSS, ale jeśli nie musisz wymieniać elementów lub klas, drugą opcją jest użycie JavaScript. Coś takiego:

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; // Your property: value;
  }
});

Lub krótszy sposób, jeśli używasz jQuery w swojej aplikacji:

$('a.active').parents('li').css('color', 'red'); // Your property: value;

W3C wykluczyło taki selektor ze względu na ogromny wpływ wydajności na przeglądarkę.

Chociaż obecnie nie ma selektora nadrzędnego w standardowym CSS, pracuję nad (osobistym) projektem o nazwie axe (tj. Rozszerzona składnia selektora CSS / ACSSSS), która wśród 7 nowych selektorów zawiera zarówno:

1. An najbliższy rodzic selektor < (który umożliwia wybór odwrotny do >)
2. an any ancestor selector ^ (który umożliwia wybór odwrotny do [SPACE])

Axe jest obecnie w stosunkowo wczesnym stadium rozwoju BETA.

Zobacz demo tutaj:

.parent {
  float: left;
  width: 180px;
  height: 180px;
  margin-right: 12px;
  background-color: rgb(191, 191, 191);
}

.child {
  width: 90px;
  height: 90px;
  margin: 45px;
  background-color: rgb(255, 255, 0);
}

.child.using-axe < .parent {
  background-color: rgb(255, 0, 0);
}

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child using-axe"></div>
</div>


<script src="https://rouninmedia.github.io/axe/axe.js"></script>

W powyższym przykładzie < jest bezpośredni selektor rodzica, więc

• .child.using-axe < .parent

Oznacza:

Każdy najbliższy rodzic .child.using-axe CZYLI .parent

Możesz użyć alternatywnie:

• .child.using-axe < div

Co oznaczałoby:

Każdy bezpośredni rodzic .child.using-axe, który jest div

Jakieś pomysły?

CSS4 będzie fajny, jeśli doda jakieś haki do Chodzenie Do Tyłu . Do tego czasu możliwe jest (choć nie wskazane) użycie checkbox i / lub radio inputS do złamać zwykły sposób, w jaki rzeczy są połączone, a przez to również pozwalają CSS działać poza swoim normalnym zakresem...

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* ▼ - Down Arrow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}

<!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

... pretty gross, ale za pomocą CSS i HTML można dotknij i ponownie dotknij wszystkiego poza body i :root z niemal dowolnego miejsca, łącząc właściwości id i forradio/checkbox input s oraz label wyzwalacze ; prawdopodobnie ktoś pokaże, jak je ponownie dotknąć.

Dodatkowym zastrzeżeniem jest to, że tylko jeden input konkretnego id może być użyty, najpierw checkbox/radio wygrywa Stan toggled innymi słowy... ale wiele etykiet może wskazywać na to samo input, chociaż to spraw, aby zarówno HTML, jak i CSS wyglądały jeszcze bardziej obrzydliwie.

... Mam nadzieję, że istnieje jakieś obejście, które istnieje natywnie dla CSS poziomu 2...

Nie jestem pewien co do innych pseudo klas, ale :checked dla pre-CSS 3. Jeśli dobrze pamiętam, było to coś w stylu [checked], dlatego możesz go znaleźć w powyższym kodzie, na przykład

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

... ale dla rzeczy takich jak ::after i :hover, nie jestem pewien, w której wersji CSS te pierwsze pojawił się.

To wszystko powiedziane, proszę nigdy nie używać tego w produkcji, nawet w gniewie. Jako żart pewny, lub innymi słowy to, że coś Może być zrobione, nie zawsze oznacza, że powinno.

Przynajmniej do CSS 3 włącznie nie możesz wybrać w ten sposób. Ale można to zrobić dość łatwo w dzisiejszych czasach w JavaScript, wystarczy dodać trochę waniliowego JavaScript, zauważ, że kod jest dość krótki.

cells = document.querySelectorAll('div');
[].forEach.call(cells, function (el) {
    //console.log(el.nodeName)
    if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
        console.log(el)
    };
});

<div>Peter</div>
<div><a href="#">Jackson link</a></div>
<div>Philip</div>
<div><a href="#">Pullman link</a></div>

Nie, Nie można wybrać rodzica tylko w CSS.

Ale ponieważ wydaje się, że masz już .active klasę, łatwiej byłoby przenieść tę klasę do li (zamiast a). W ten sposób możesz uzyskać dostęp zarówno do li, jak i a tylko za pomocą CSS.

Nie ma selektora nadrzędnego css (a więc w preprocesorach css)ze względu na " główne powody, dla których grupa robocza CSS odrzuciła wcześniej propozycje selektorów nadrzędnych, są związane z wydajnością przeglądarki i problemami z przyrostowym renderowaniem."

Zmiana elementu nadrzędnego na podstawie elementu podrzędnego może się obecnie zdarzyć tylko wtedy, gdy wewnątrz elementu nadrzędnego znajduje się element <input>. Gdy dane wejściowe zostaną ustawione ostrości, ich odpowiedni element nadrzędny może zostać zmieniony za pomocą CSS.

Poniższy przykład pomoże Ci zrozumieć użycie :focus-within w CSS.

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}

<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>

Zatrudniłbym do tego kod JavaScript. Na przykład w Reaccie, gdy iterujesz nad tablicą, dodaj inną klasę do komponentu nadrzędnego, co wskazuje, że zawiera ona twoje dzieci:

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {kiddos.map(kid => <div key={kid.id} />)}
</div>

A potem po prostu:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

Spróbuj tego...

To rozwiązanie wykorzystuje zwykły CSS1 bez Javascript i działa we wszystkich przeglądarkach, starych i nowych . Po kliknięciu znacznik child anchor aktywuje Zdarzenie pseudo-klasowe active. Następnie po prostu ukrywa się, pozwalając zdarzeniu active przebić się do znacznika rodzica li, który następnie ponownie się zmienia i ponownie ujawnia swoje dziecko z kotwicy w Nowym Stylu. Dziecko stylizowało rodzica.

Używając Twojego przykładu:

<ul>
    <li class="listitem">
        <a class="link" href="#">This is a Link</a>
    </li>
</ul>

Teraz zastosuj te style z active pseudo-klasa na a, aby zmienić znacznik rodzica li Po kliknięciu linku:

a.link {
    display: inline-block;
    color: white;
    background-color: green;
    text-decoration: none;
    padding: 5px;
}

li.listitem {
    display: inline-block;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */

a.link:active {
    display: none;
}

.listitem:active {
    background-color: blue;
}

.listitem:active a.link {
    display: inline-block;
    background-color: transparent;
}

Powinieneś zobaczyć link z zielonym tłem teraz zmienić na niebieskim tle elementu listy po kliknięciu.

Zmienia się na

On click.