Vraag Is er een CSS-bovenliggende selector?


Hoe selecteer ik de <li> element dat een directe ouder van het ankerelement is?

In het voorbeeld zou mijn CSS zoiets zijn als dit:

li < a.active {
    property: value;
}

Uiteraard zijn er manieren om dit met JavaScript te doen, maar ik hoop dat er een soort van oplossing is die eigen is aan CSS Level 2.

Het menu dat ik probeer te stijlen, wordt weggevaagd door een CMS, dus ik kan het actieve element niet verplaatsen naar de <li> element ... (tenzij ik de menu-opbouwmodule een thema geef dat ik liever niet doe).

Om het even welke ideeën?


2507
2018-06-18 19:59


oorsprong


antwoorden:


Er is momenteel geen manier om het bovenliggende element van een element in CSS te selecteren.

Als er een manier was om dit te doen, zou dit in een van de huidige CSS selectors-specificaties staan:

In de tussentijd moet je een beroep doen op JavaScript als je een bovenliggend element moet selecteren.


De Selectors Level 4 Working Draft bevat een :has() pseudo-klasse die hetzelfde werkt als de jQuery-implementatie. Vanaf 2018 dit wordt nog steeds niet door een browser ondersteund.

Gebruik makend van :has() de oorspronkelijke vraag zou hiermee opgelost kunnen worden:

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

2007
2018-06-18 20:16



Ik denk niet dat je de ouder alleen in CSS kunt selecteren.

Maar zoals je al een hebt .active klasse, zou het niet eenvoudiger zijn om die klasse naar de li (in plaats van de a)? Op die manier hebt u toegang tot beide li en de a alleen via css.


119
2018-06-18 20:08



Je kunt dit gebruiken script.

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

Hiermee wordt elke ouder van een tekstinvoer geselecteerd. Maar wacht, er is nog veel meer. Als u wilt, kunt u een opgegeven bovenliggend item selecteren:

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

of selecteer het wanneer het actief is:

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

Bekijk deze HTML:

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

je kunt dat selecteren span.help wanneer de input is actief en laat het zien:

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

Er zijn veel meer mogelijkheden; bekijk de documentatie van de plug-in.

Trouwens, het werkt in IE.


99
2017-08-13 10:13



Zoals vermeld door een aantal anderen, is er geen manier om de bovenliggende elementen van een element te stijlen met alleen CSS, maar het volgende werkt met jQuery:

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

74
2017-12-14 14:51



Er is geen bovenliggende selector; precies zoals er geen vorige broer / zus-selector is. Een goede reden om deze selectors niet te hebben, is omdat de browser alle kinderen van een element moet doorlopen om te bepalen of een klasse al dan niet moet worden toegepast. Bijvoorbeeld als u schreef:

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

Dan zal de browser moeten wachten tot hij alles heeft geladen en geparseerd tot de </body> om te bepalen of de pagina rood moet zijn of niet.

Dit artikel Waarom hebben we geen bovenliggende selector legt het in detail uit.


44
2018-01-21 08:43



er is geen manier om dit in css2 te doen. je zou de klasse kunnen toevoegen aan de li en verwijzen naar de a

li.active > a {
    property: value;
}

39
2018-06-18 20:06



De CSS-selector "Algemene Sibling Combinator"Kan misschien worden gebruikt voor wat je wilt:

E ~ F {
    property: value;
}

Dit komt overeen met elk F element dat wordt voorafgegaan door een E element.


26
2018-06-30 14:00



Probeer te schakelen a naar block weergeven en gebruik vervolgens elke gewenste stijl. aelement zal vullen li element en je zult in staat zijn om het uiterlijk aan te passen zoals je wilt. Vergeet niet om in te stellen li opvulling naar 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



Niet in CSS 2 voor zover ik weet. CSS 3 heeft meer robuuste selectors, maar wordt niet consequent geïmplementeerd in alle browsers. Zelfs met de verbeterde selectors geloof ik niet dat het exact zal presteren wat u in uw voorbeeld hebt gespecificeerd.


19
2018-06-18 20:09



Ik weet dat het OP op zoek was naar een CSS-oplossing, maar het is eenvoudig te bereiken met behulp van jQuery. In mijn geval moest ik de <ul> bovenliggende tag voor a <span> tag in het kind <li>. jQuery heeft de :has selector, dus het is mogelijk om een ​​ouder te identificeren aan de hand van de onderliggende items:

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

selecteert de ul element met een onderliggende element met id enigeID. Of om de oorspronkelijke vraag te beantwoorden, zou zoiets als het volgende het juiste moeten doen (niet getest):

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

17
2018-05-16 22:04