css - with - sass parent selector




Gibt es einen CSS-Elternselektor? (18)

Das Pseudoelement :focus-within ermöglicht die Auswahl eines übergeordneten Elements, wenn ein Nachkomme den Fokus hat.

Ein Element kann fokussiert werden, wenn es ein tabindex Attribut hat.

Browserunterstützung für focus-within

Tabindex

Beispiel

.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>

Wie wähle ich das <li> -Element aus, das ein direktes übergeordnetes Element des Ankerelements ist?

Im Beispiel wäre mein CSS ungefähr so:

li < a.active {
    property: value;
}

Offensichtlich gibt es Möglichkeiten, dies mit JavaScript zu tun, aber ich hoffe, dass es eine Art Problemumgehung gibt, die in CSS Level 2 vorhanden ist.

Das Menü, das ich zu gestalten versuche, wird von einem CMS ausgegeben, sodass ich das aktive Element nicht auf das Element <li> (es sei denn, ich habe das Menüerstellungsmodul entworfen, das ich lieber nicht machen möchte).

Irgendwelche Ideen?


Das W3C schloss eine solche Auswahl aufgrund der großen Auswirkungen auf die Leistung eines Browsers aus.


Derzeit gibt es keine Elternauswahl und wird in keinem der Gespräche des W3C diskutiert. Sie müssen verstehen, wie CSS vom Browser bewertet wird, um zu verstehen, ob wir es brauchen oder nicht.

Hier gibt es viele technische Erklärungen.

Jonathan Snook erklärt, wie CSS bewertet wird .

Chris Coyier über die Gespräche der Elternauswahl .

Harry Roberts über das Schreiben effizienter CSS-Selektoren .

Aber Nicole Sullivan hat einige interessante Fakten zu positiven Trends .

Diese Leute sind alle erstklassig im Bereich Frontend-Entwicklung.


Derzeit ist es nicht möglich, das übergeordnete Element eines Elements in CSS auszuwählen.

Wenn es eine Möglichkeit gibt, dies zu tun, würde dies in einer der aktuellen CSS-Selektorspezifikationen sein:

In der Zwischenzeit müssen Sie auf JavaScript zurückgreifen, wenn Sie ein übergeordnetes Element auswählen müssen.

Der Arbeitsentwurf von Selectors Level 4 enthält eine :has() Pseudoklasse, die genauso wie die jQuery-Implementierung funktioniert. Ab 2018 wird dies noch von keinem Browser unterstützt .

Mit :has() die ursprüngliche Frage damit gelöst werden:

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

Dies ist der am meisten diskutierte Aspekt der Selectors Level 4- Spezifikation. Mit diesem Selektor wird es möglich, ein Element entsprechend seinem Kind zu gestalten, indem ein Ausrufezeichen nach dem angegebenen Selektor (!) Verwendet wird.

Zum Beispiel:

body! a:hover{
   background: red;
}

setzt eine rote Hintergrundfarbe, wenn der Benutzer über einem Anker schwebt.

Aber wir müssen die Browser-Implementierung abwarten :(


Es gibt ein Plugin, das CSS um einige nicht standardmäßige Funktionen erweitert, die beim Entwerfen von Websites wirklich hilfreich sein können. Es heißt EQCSS .

EQCSS fügt unter anderem einen übergeordneten Selektor hinzu. Es funktioniert in allen Browsern ab IE8. Hier ist das Format:

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

Hier haben wir eine Elementabfrage für jedes Element a.active , und für die Stile in dieser Abfrage machen Dinge wie $parent einen Sinn, da es einen Bezugspunkt gibt. Der Browser kann das übergeordnete parentNode finden, da es in JavaScript dem übergeordneten parentNode sehr ähnlich ist.

Hier ist eine Demo von $parent und eine weitere $parent Demo, die in IE8 funktioniert , sowie ein Screenshot für den Fall, dass Sie keinen IE8 zum Testen haben .

EQCSS enthält auch die meta-selectors $prev für das Element vor einem ausgewählten Element, $this nur für die Elemente, die einer Elementabfrage entsprechen, und mehr.


Hat jemand so etwas vorgeschlagen? Nur eine Idee für ein horizontales Menü ...

Teil von HTML

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

Teil von 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%; }

Demo und restlicher Code aktualisiert

Ein weiteres Beispiel für die Verwendung mit Texteingaben: Wählen Sie das übergeordnete Feldset aus


Hier ist ein Hack, der pointer-events mit 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>


Ich weiß, dass das OP nach einer CSS-Lösung gesucht hat, aber es ist mit jQuery einfach zu erreichen. In meinem Fall musste ich das übergeordnete <ul> -Tag für ein im <span> -Tag enthaltenes <li> . jQuery hat den Selektor :has die Möglichkeit, ein Elternteil anhand der darin enthaltenen Kinder zu identifizieren:

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

wählt das ul Element aus, das ein untergeordnetes Element mit der ID someId hat . Oder um die ursprüngliche Frage zu beantworten, sollte etwa der folgende Trick (ungetestet) ausgeführt werden:

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

In CSS können wir die Eigenschaften in der Hierarchie nach unten kaskadieren, jedoch nicht in die entgegengesetzte Richtung. Um den übergeordneten Stil für ein untergeordnetes Ereignis zu ändern, verwenden Sie wahrscheinlich jQuery.

$el.closest('.parent').css('prop','value');

Mit kaufmännischem Und-Zeichen in SASS ist es möglich:

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSS-Ausgabe:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

Nein, Sie können das übergeordnete Element nicht nur in CSS auswählen.

Aber da Sie bereits eine .active Klasse zu haben .active , wäre es nicht einfacher, diese Klasse in das li (anstelle der a ) zu verschieben? Auf diese Weise können Sie sowohl auf das li als auch auf das a über css zugreifen.


Sie können dieses script .

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

Dadurch wird ein beliebiges übergeordnetes Element einer Texteingabe ausgewählt. Aber warten Sie, es gibt noch viel mehr. Wenn Sie möchten, können Sie ein bestimmtes übergeordnetes Element auswählen:

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

oder wähle es aus, wenn es aktiv ist:

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

Schauen Sie sich dieses HTML an:

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

Sie können diese span.help auswählen, wenn die input aktiv ist, und sie span.help :

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

Es gibt viele weitere Möglichkeiten. Schauen Sie sich einfach die Dokumentation des Plugins an.

BTW, es funktioniert im IE.


Sie können versuchen, den Hyperlink als übergeordnetes Element zu verwenden und dann die inneren Elemente im Hover zu ändern. So was:

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

Auf diese Weise können Sie den Stil in mehreren inneren Tags basierend auf dem Rollover des übergeordneten Elements ändern.


Technisch gibt es keine direkte Möglichkeit, dies zu tun, aber Sie können dies entweder mit jquery oder javascript sortieren.

Aber sowas kann man auch 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 für den übergeordneten jQuery-Selektor


Versuchen Sie, a Anzeige auf block umzustellen, und verwenden Sie dann einen beliebigen Stil. a Element wird ein li Element füllen, und Sie können das Aussehen beliebig ändern. Vergessen Sie nicht, die li Auffüllung auf 0 zu setzen.

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

Zumindest bis einschließlich CSS3 können Sie nicht so auswählen. In JS ist dies heutzutage jedoch relativ einfach möglich. Sie müssen lediglich etwas Vanille-JavaScript hinzufügen. Beachten Sie, dass der Code ziemlich kurz ist.

      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>








css-selectors