Gibt es einen CSS-Eltern-Selektor?

Question

Wie wähle ich das

• Element aus, das ein direktes Elternteil des Anker Elements ist?

  Als Beispiel würde mein CSS so aussehen:

  li < a.active {
      property: value;
  }

  Offensichtlich gibt es Möglichkeiten, dies mit JavaScript zu tun, aber ich hoffe, dass es eine Art Umweg gibt, der nativ für CSS Level 2 existiert.

  Das Menü, das ich zu gestalten versuche, wird von einem CMS ausgespuckt, daher kann ich das aktive Element nicht zum

• Element verschieben... (es sei denn, ich thematisiere das Menüerstellungsmodul, was ich lieber nicht tun würde).

Answer 1

Technisch gibt es keinen direkten Weg, dies zu tun. Sie können das jedoch entweder mit jQuery oder JavaScript sortieren.

Sie können jedoch auch so etwas tun.

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

jQuery

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

Wenn Sie dies mit jQuery erreichen möchten, finden Sie hier die Referenz zum jQuery-Eltern-Selektor.

Answer 2

Die kurze Antwort ist NEIN; wir haben keinen Elternselektor in diesem Stadium in CSS, aber wenn Sie die Elemente oder Klassen sowieso nicht austauschen müssen, ist die zweite Möglichkeit die Verwendung von JavaScript. Etwas wie das:

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

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; // Ihre Eigenschaft: Wert;
  }
});

Oder eine kürzere Methode, wenn Sie jQuery in Ihrer Anwendung verwenden:

$('a.active').parents('li').css('color', 'red'); // Ihre Eigenschaft: Wert;

Answer 3

Auch wenn es derzeit keinen Eltern-Selektor in standardmäßigem CSS gibt, arbeite ich an einem (persönlichen) Projekt namens axe (d. h. Erweiterter CSS-Selektor-Syntax / ACSSSS), das unter seinen 7 neuen Selektoren sowohl Folgendes enthält:

1. ein unmittelbarer Eltern Selektor < (der die gegenteilige Auswahl zu > ermöglicht)
2. ein beliebiger Vorfahre Selektor ^ (der die gegenteilige Auswahl zu [SPACE] ermöglicht)

axe befindet sich derzeit in einem relativ frühen BETA-Entwicklungsstadium.

Hier sehen Sie eine Demo:

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

.child {
  width: 90px;
  height: 90px;
  margin: 45px;
  padding-top: 12px;
  font-family: sans-serif;
  text-align: center;
  font-size: 12px;
  background-color: rgb(255, 255, 0);
}

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

  Hier macht der axe Eltern-Selektor das äußere Quadrat rot.

In dem obigen Beispiel ist < der unmittelbare Eltern-Selektor, also

• .child.using-axe < .parent

bedeutet:

irgendein unmittelbarer Eltern von .child.using-axe, der .parent ist

Sie könnten alternativ auch verwenden:

• .child.using-axe < div

was bedeutet:

irgendein unmittelbarer Eltern von .child.using-axe, der ein div ist

Answer 4

Die W3C hat einen solchen Selektor ausgeschlossen, da er einen enormen Leistungseinfluss auf einen Browser haben würde.

Answer 5

Irgendwelche Ideen?

CSS4 wäre schick, wenn es einige Hooks für das Rückwärtsgehen hinzufügt. Bis dahin ist es möglich (obwohl nicht empfehlenswert), checkbox und/oder radio inputs zu verwenden, um den gewöhnlichen Verbindungsweg zu unterbrechen und damit auch CSS ermöglichen, außerhalb seines normalen Bereichs zu arbeiten...

/* Dinge verstecken, die später angezeigt werden können */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Alte Microsoft-Opazität */
}

/* Basistyle für Inhalt und Menüstil */
.main__content {
  background-color: hellgrau;
  color: schwarz;
}

.menu__hidden {
  background-color: schwarz;
  color: hellgrau;
  /* Liste nicht so _listy_ aussehen lassen */
  list-style: none;
  padding-left: 5px;
}

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

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

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

/* Anpassen, um mehr `auswählen` zu mögen, wenn Sie möchten */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: Zeiger;
  background-color: dunkelgrau;
  color: weiß;
}

/**
 * Dinge, die getan werden, wenn Checkboxen/Radios geprüft sind
 */

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

/* Dieser Teil ist etwas, das Sie möglicherweise anderswo sehen */
.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-Änderungen nur auf der Grundlage von nicht-inline Checkboxen
 * ... AKA das Zeug, das Sie nach diesem nicht mehr ignorieren können...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: hellgrau;
  color: schwarz;
}

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

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

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

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: dunkelgrün;
  color: rot;
}

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

    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

   Theme

      Standardstyle

      Erster alternativer Stil

      Zweiter alternativer Stil

    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.

... ziemlich ungenießbar, aber nur mit CSS und HTML ist es möglich, fast alles außer dem body und :root von fast überall aus mit Hilfe der Verknüpfung der id und for Eigenschaften von radio/checkbox inputs und label Triggern zu berühren und neu zu berühren.

Ein weiterer Haken ist, dass nur ein input einer bestimmten id-Nummer verwendet werden kann, das erste checkbox/radio gewinnt einen umgelegten Zustand, mit anderen Worten... Aber mehrere Labels können alle auf dasselbe input verweisen, obwohl dies sowohl das HTML als auch das CSS noch ungenießbarer aussehen ließe.

---

... Ich hoffe, dass es eine Art Workaround gibt, der nativ für CSS Level 2 existiert...

Ich bin mir nicht sicher bei den anderen Pseudoklassen, aber ich habe :checked vor CSS 3 verwendet. Wenn ich mich richtig erinnere, war es etwas wie [checked], deshalb finden Sie es im obigen Code, zum Beispiel,

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* Regeln: und-so-weiter; */
}

... aber für Dinge wie ::after und :hover, bin ich mir überhaupt nicht sicher, in welcher CSS-Version sie erstmals erschienen sind.

All das gesagt, bitte verwenden Sie dies niemals in der Produktion, nicht einmal aus Wut. Als Scherz okay, oder mit anderen Worten, nur weil etwas getan werden kann, bedeutet das nicht immer, dass es getan werden sollte.