Het plusteken (+
) is voor de volgende broer of zus.
Is er een equivalent voor de vorige broer of zus?
Antwoord 1, autoriteit 100%
Nee, er is geen “vorige broer of zus” selector.
Over een verwante opmerking, ~
is voor de algemene opvolger van broer of zus (wat betekent dat het element na deze komt, maar niet noodzakelijkerwijs onmiddellijk erna) en is een CSS3-selector. +
is voor de volgende broer of zus en is CSS2.1.
Zie Aangrenzende combinator voor broers en zussenvan Selectors niveau 3en 5.7 Aangrenzende selectors voor broers en zussenvan Cascading Style Sheets Niveau 2 Revisie 1 (CSS 2.1) Specificatie.
Antwoord 2, autoriteit 31%
Ik heb een manier gevonden om alle eerdere broers en zussen te stylen (in tegenstelling tot ~
) die mogelijk werkt, afhankelijk van wat je nodig hebt.
Stel dat je een lijst met links hebt en als je op een link zweeft, zouden alle voorgaande rood moeten worden. Je kunt het als volgt doen:
/* default link color is blue */
.parent a {
color: blue;
}
/* prev siblings should be red */
.parent:hover a {
color: red;
}
.parent a:hover,
.parent a:hover ~ a {
color: blue;
}
<div class="parent">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
Antwoord 3, Autoriteit 20%
Selectors Level 4 introduceert :has()
(Eerder de onderwerpindicator !
) waarmee u een vorige broer of zus kunt selecteren met:
previous:has(+ next) {}
… maar op het moment van schrijven is het een afstand buiten de bloedingsrand voor browserondersteuning.
Antwoord 4, Autoriteit 19%
Overweeg de order
eigendommen van flex- en roosterindelen.
Ik zal focus op FlexBox in de onderstaande voorbeelden, maar dezelfde concepten zijn van toepassing op het rooster.
Met FlexBox kan een eerdere Sibling-selector worden gesimuleerd.
In het bijzonder, de FLEX order
EIGENDELING kan elementen rond het scherm verplaatsen.
Hier is een voorbeeld:
U wilt element A om rood te worden wanneer element B zweefd is.
<ul> <li>A</li> <li>B</li> </ul>
Stappen
-
MAAK DE
ul
A FLEX-container.ul { display: flex; }
-
Omgekeerde de volgorde van broers en zussen in de mark-up.
<ul> <li>B</li> <li>A</li> </ul>
-
Gebruik een sibling selector op doelelement A (
~
of+
Will Do).li:hover + li { background-color: red; }
-
Gebruik de eigenschap flex
order
om de volgorde van broers en zussen op het visuele scherm te herstellen.li:last-child { order: -1; }
…en voilà! Een eerdere broer of zus-kiezer is geboren (of op zijn minst gesimuleerd).
Hier is de volledige code:
ul {
display: flex;
}
li:hover + li {
background-color: red;
}
li:last-child {
order: -1;
}
/* non-essential decorative styles */
li {
height: 200px;
width: 200px;
background-color: aqua;
margin: 5px;
list-style-type: none;
cursor: pointer;
}
<ul>
<li>B</li>
<li>A</li>
</ul>
Antwoord 5, autoriteit 8%
Ik had dezelfde vraag, maar toen had ik een “duh”-moment. In plaats van te schrijven
x ~ y
schrijf
y ~ x
Uiteraard komt dit overeen met “x” in plaats van “y”, maar het beantwoordt de vraag “is er een overeenkomst?” vraag, en eenvoudige DOM-traversal kan u efficiënter naar het juiste element brengen dan in javascript te herhalen.
Ik realiseer me dat de oorspronkelijke vraag een CSS-vraag was, dus dit antwoord is waarschijnlijk volledig irrelevant, maar andere JavaScript-gebruikers kunnen op de vraag struikelen via een zoekopdracht zoals ik.
Antwoord 6, Autoriteit 3%
Twee trucs . In principe het omzetten van de HTML-volgorde van uw gewenste elementen in HTML en met behulp van
~
volgende broers en zussen operator:
float-right
+ Inverse de volgorde van HTML-elementen
div{ /* Do with the parent whatever you know just to make the
inner float-right elements appear where desired */
display:inline-block;
}
span{
float:right; /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
background:red;
}
<div>
<!-- Reverse the order of inner elements -->
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
Antwoord 7, Autoriteit 3%
+
is voor de volgende broer of zus. Is er een equivalent voor de vorige
broer of zus?
U kunt de TWEE AX selectors gebruiken: !
EN ?
Er zijn 2 volgende sibling selectors in conventionele CSS:
+
is de onmiddellijke volgende broer sibling selector~
IS DE ELKE Achterleveringskiezer
In conventionele CSS is er Geen eerdere Sibling-selector .
In de axeCSS-postprocessor-bibliotheek zijn er echter 2eerdere selectors voor broers en zussen:
?
is de onmiddellijkeeerdere selector voor broers en zussen (tegenover+
)!
is de elkeeerdere selector voor broers en zussen (tegenover~
)
Werkvoorbeeld:
In het onderstaande voorbeeld:
.any-subsequent:hover ~ div
selecteert een volgendediv
.immediate-subsequent:hover + div
selecteert de onmiddellijk volgendediv
.any-previous:hover ! div
selecteert een eerderediv
.immediate-previous:hover ? div
selecteert de onmiddellijk vorigediv
div {
display: inline-block;
width: 60px;
height: 100px;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
text-align: center;
vertical-align: top;
cursor: pointer;
opacity: 0;
transition: opacity 0.6s ease-out;
}
code {
display: block;
margin: 4px;
font-size: 24px;
line-height: 24px;
background-color: rgba(0, 0, 0, 0.5);
}
div:nth-of-type(-n+4) {
background-color: rgb(0, 0, 255);
}
div:nth-of-type(n+3):nth-of-type(-n+6) {
opacity: 1;
}
.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
opacity: 1;
}
<h2>Hover over any of the blocks below</h2>
<div></div>
<div></div>
<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>
<div></div>
<div></div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>
Antwoord 8, autoriteit 2%
Nog een flexbox-oplossing
Je kunt de volgorde van elementen in HTML omkeren. Naast het gebruik van order
zoals in Michael_B’s antwoord, kun je ook flex-direction: row-reverse;
of flex-direction: column-reverse;
afhankelijk van uw lay-out.
Werkvoorbeeld:
.flex {
display: flex;
flex-direction: row-reverse;
/* Align content at the "reversed" end i.e. beginning */
justify-content: flex-end;
}
/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
background-color: lime;
}
/* styles just for demo */
.flex-item {
background-color: orange;
color: white;
padding: 20px;
font-size: 3rem;
border-radius: 50%;
}
<div class="flex">
<div class="flex-item">5</div>
<div class="flex-item">4</div>
<div class="flex-item">3</div>
<div class="flex-item">2</div>
<div class="flex-item">1</div>
</div>
Antwoord 9, autoriteit 2%
Er is momenteel geen officiële manier om dat te doen, maar je kunt een kleine truc gebruiken om dit te bereiken! Onthoud dat het experimenteel is en enige beperking heeft…
(controleer deze linkals u zich zorgen maakt over de compatibiliteit van de navigator)
Wat u kunt doen is een CSS3-selector gebruiken: de pseudo-klasse genaamd nth-child()
#list>* {
display: inline-block;
padding: 20px 28px;
margin-right: 5px;
border: 1px solid #bbb;
background: #ddd;
color: #444;
margin: 0.4em 0;
}
#list :nth-child(-n+4) {
color: #600b90;
border: 1px dashed red;
background: orange;
}
<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>
<div id="list">
<span>1</span><!-- this will be selected -->
<p>2</p><!-- this will be selected -->
<p>3</p><!-- this will be selected -->
<div>4</div><!-- this will be selected -->
<div>5</div>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
Antwoord 10, autoriteit 2%
Er is geen “vorige selector”, maar u kunt de combinatie van :not
en ~
(“na selector”) gebruiken. Geen omgekeerde volgorde, geen javascript.
.parent a{
color: blue
}
.parent a.active{
color: red
}
.parent a:not(.parent a.active ~ a){
color: red
}
<div class="parent">
<a href="">link</a>
<a href="">link</a>
<a href="" class="active">link</a>
<a href="">link</a>
<a href="">link</a>
</div>
Antwoord 11
Nee. Het is niet mogelijk via CSS. Het neemt de “Cascade” ter harte ;-).
Als u echter JavaScriptaan uw pagina kunt toevoegen, kunt u met een klein beetje jQueryuw einddoel bereiken.
U kunt jQuery’s find
gebruiken om een “vooruitblik” uit te voeren op uw doelelement/klasse/id en vervolgens terug te gaan om uw doel te selecteren.
Vervolgens gebruik je jQuery om de DOM (CSS) voor je element te herschrijven.
Op basis van dit antwoord van Mike Brant,
het volgende jQuery-fragment zou kunnen helpen.
$('p + ul').prev('p')
Hiermee worden eerst alle <ul>
‘s geselecteerd die onmiddellijk volgen op een <p>
.
Daarna “gaat het terug” om alle vorige <p>
s uit die set <ul>
s te selecteren.
In feite is ‘vorige broer of zus’ geselecteerd via jQuery.
Gebruik nu de functie .css
om uw CSS nieuwe waarden voor dat element door te geven.
In mijn geval was ik op zoek naar een manier om een DIV te selecteren met de id #full-width
, maar ALLEEN als het een (indirecte) afstammeling DIV had met de klasse van .companies
.
Ik had controle over alle HTML onder .companies
, maar kon de HTML erboven niet wijzigen.
En de cascade gaat maar in 1 richting: naar beneden.
Zo zou ik ALLE #full-width
s kunnen selecteren.
Of ik kan .companies
selecteren die alleen een #full-width
volgen.
Maar ik kon nietalleen #full-width
s selecteren die doorgingen.companies
.
En nogmaals, ik kon .companies
niet hoger in de HTML toevoegen. Dat deel van de HTML is extern geschreven en heeft onze code ingepakt.
Maar met jQuery kan ik kande vereiste #full-width
en selecteren en vervolgens de juiste stijl toewijzen:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
Dit vindt alle #full-width .companies
en selecteert alleen die .companies
, vergelijkbaar met hoe selectors worden gebruikt om specifieke elementen in standaard in CSS te targeten.< br>
Vervolgens gebruikt het .parents
om “terug te gaan” en ALLE ouders van .companies
te selecteren,
maar filtert die resultaten om alleen #fill-width
-elementen te behouden, zodat uiteindelijk
het selecteert alleen een #full-width
element als het een .companies
klasse afstammeling heeft.
Ten slotte wijst het een nieuwe CSS-waarde (width
) toe aan het resulterende element.
$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
background-color: lightblue;
width: 120px;
height: 40px;
border: 1px solid gray;
padding: 5px;
}
.wrapper {
background-color: blue;
width: 250px;
height: 165px;
}
.parent {
background-color: green;
width: 200px;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">
<div class="parent">
"parent" turns red
<div class="change-parent">
descendant: "change-parent"
</div>
</div>
<div class="parent">
"parent" stays green
<div class="nope">
descendant: "nope"
</div>
</div>
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>
Antwoord 12
Je zou dubbele ontkenning kunnen gebruiken
SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }
Vervang SELECTOR
door de TAG
of .CLASS
(Het gebruik van #ID
is waarschijnlijk te specifiek).
Vervang FILTER
door een andere :PSUEDO-SELECTOR
(ik heb alleen :hover
geprobeerd) of .CLASS
( Meer om door Javascript te bladeren).
Aangezien het typische gebruik waarschijnlijk afhankelijk is van zweven (zie voorbeeld dat volgt)
/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}
/* Solution */
div.parent:hover > div.child:not(:hover):not(:hover ~ .child) {
background-color:red;
border-radius:1.5em;
}
div.parent:hover > div.child:not(:hover):not(:hover ~ .child) > div {
background-color:yellow;
}
/* Make pretty (kinda) */
div.parent {
width:9em;
height:9em;
/* Layout */
display:grid;
grid-template-columns : auto auto auto;
grid-template-rows : auto auto auto;
}
div.child {
/* Dimensions */
height:3em;
width:3em;
/* Layout */
position:relative;
/* Cursor */
cursor: pointer;
/* Presentation */
border: 1px black solid;
border-radius:1.5em;
}
.star {
/* Dimensions */
width: 2.5em;
height: 2.5em;
/* Placement */
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
/* Geometry */
-webkit-clip-path: polygon(
50% 0%,
63% 38%,
100% 38%,
69% 59%,
82% 100%,
50% 75%,
18% 100%,
31% 59%,
0% 38%,
37% 38%
);
clip-path: polygon(
50% 0%,
63% 38%,
100% 38%,
69% 59%,
82% 100%,
50% 75%,
18% 100%,
31% 59%,
0% 38%,
37% 38%
);
/* Presentation */
background-color: lightgrey;
}
div.child:hover {
/* Presentation */
background-color:yellow;
border-radius:1.5em;
}
div.child:hover > div.star {
/* Presentation */
background-color:red;
}
<div class="parent">
<div class="child" href="#"><div class="star"></div></div>
<div class="child" href="#"><div class="star"></div></div>
<div class="child" href="#"><div class="star"></div></div>
<div class="child" href="#"><div class="star"></div></div>
<div class="child" href="#"><div class="star"></div></div>
<div class="child" href="#"><div class="star"></div></div>
<div class="child" href="#"><div class="star"></div></div>
<div class="child" href="#"><div class="star"></div></div>
<div class="child" href="#"><div class="star"></div></div>
</div>
Antwoord 13
Als je de exacte positie weet, zou een :nth-child()
-gebaseerde uitsluiting van alle volgende broers en zussen werken.
ul li:not(:nth-child(n+3))
Die alle li
s vóór de 3e (bijv. 1e en 2e) zou selecteren. Maar naar mijn mening ziet dit er lelijk uit en heeft het een zeer strakke usecase.
U kunt ook het n-de kind van rechts naar links selecteren:
ul li:nth-child(-n+2)
Wat hetzelfde doet.
Antwoord 14
Verwijderen van de stijlen van de volgende broers en zussen op Hover, zodat het eruit ziet als alleen vorige broers en zussen hebben stijlen toegevoegd aan zweven.
ul li {
color: red;
cursor: pointer;
}
ul:hover li {
color: blue;
}
ul:hover li:hover ~ li{
color: red;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Antwoord 15
Er is geen “vorige” Sibling-selector Helaas, maar je kunt mogelijk nog steeds hetzelfde effect krijgen door positionering (bijvoorbeeld zwevend te gebruiken). Het hangt af van wat je probeert te doen.
In mijn geval wilde ik een voornamelijk CSS 5-sterren ratingsysteem. Ik zou moeten kleuren (of het pictogram van) de voorgaande sterren inruilen. Door elk element goed te zweven, krijg ik in wezen hetzelfde effect (de HTML voor de sterren moet dus ‘achteruit’ worden geschreven).
Ik gebruik Fontawesome in dit voorbeeld en wissel tussen de Unicodes van Fa-Star-O en Fa-Star
http://fortawesome.github.io/font-awesome/
CSS:
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* set all stars to 'empty star' */
.stars-container {
display: inline-block;
}
/* set all stars to 'empty star' */
.stars-container .star {
float: right;
display: inline-block;
padding: 2px;
color: orange;
cursor: pointer;
}
.stars-container .star:before {
content: "\f006"; /* fontAwesome empty star code */
}
/* set hovered star to 'filled star' */
.star:hover:before{
content: "\f005"; /* fontAwesome filled star code */
}
/* set all stars after hovered to'filled star'
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
content: "\f005"; /* fontAwesome filled star code */
}
HTML:
(40)
JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/
Antwoord 16
Afhankelijk van uw exacte doel, is er een manier om het nut van een bovenliggende selector te bereiken zonder er een te gebruiken (zelfs als er een zou bestaan)…
Stel dat we hebben:
<div>
<ul>
<li><a>Pants</a></li>
<li><a>Socks</a></li>
<ul>
<li><a>White socks</a></li>
<li><a>Blue socks</a></li>
</ul>
</ul>
</div>
Wat kunnen we doen om het blok Sokken (inclusief de kleuren van de sokken) visueel te laten opvallen door tussenruimte te gebruiken?
Wat zou leuk zijn maar bestaat niet:
ul li ul:parent {
margin-top: 15px;
margin-bottom: 15px;
}
Wat bestaat:
li > a {
margin-top: 15px;
display: block;
}
li > a:only-child {
margin-top: 0px;
}
Hiermee worden alle ankerlinks ingesteld op een marge van 15px bovenaan en wordt deze teruggezet naar 0 voor degenen zonder UL-elementen (of andere tags) in LI’s.
Antwoord 17
Ik had een oplossing nodig om de vorige broer of zus te selecteren. Ik bedacht deze oplossing met behulp van React en Styled-componenten. Dit is niet mijn exacte oplossing (dit is uit het geheugen, uren later). Ik weet dat er een fout zit in de setHighlighterRow-functie.
OnMouseOver een rij stelt de rij-index in op staat en geeft de vorige rij opnieuw weer met een nieuwe achtergrondkleur
class ReactClass extends Component {
constructor() {
this.state = {
highlightRowIndex: null
}
}
setHighlightedRow = (index) => {
const highlightRowIndex = index === null ? null : index - 1;
this.setState({highlightRowIndex});
}
render() {
return (
<Table>
<Tbody>
{arr.map((row, index) => {
const isHighlighted = index === this.state.highlightRowIndex
return {
<Trow
isHighlighted={isHighlighted}
onMouseOver={() => this.setHighlightedRow(index)}
onMouseOut={() => this.setHighlightedRow(null)}
>
...
</Trow>
}
})}
</Tbody>
</Table>
)
}
}
const Trow = styled.tr`
& td {
background-color: ${p => p.isHighlighted ? 'red' : 'white'};
}
&:hover {
background-color: red;
}
`;
Antwoord 18
Er is geen, en er is.
Als u het labelvóór de invoermoet plaatsen, plaatst u het labelna de invoeren houdt u zowel het label& amp; de invoerin een div, en stijl de divals volgt:
.input-box {
display: flex;
flex-direction: column-reverse;
}
<div class="input-box">
<input
id="email"
class="form-item"
/>
<label for="email" class="form-item-header">
E-Mail*
</label>
</div>
Antwoord 19
Denk niet dat er hier een soortgelijk antwoord is, dus probeer dit. Uitgaande van HTML van:
<ul>
<li>before</li>
<li class="target">target</li>
<li>after</li>
<li>after</li>
</ul>
Voeg een stijl toe aan alle kinderen en maak vervolgens de stijl ongedaan voor het doel en de onderliggende kinderen van uw doel.
ul > li { color: red; }
ul > li.target, ul > li.target ~ li { color: inherit; }
Antwoord 20
Ik had een soortgelijk probleem en ontdekte dat alle problemen van deze aard als volgt kunnen worden opgelost:
- geef al je items een stijl.
- geef je geselecteerde item een stijl.
- geef volgende items een stijl met + of ~.
en op deze manier kun je je huidige, vorige items (alle items overschreven door huidige en volgende items) en je volgende items stylen.
voorbeeld:
/* all items (will be styled as previous) */
li {
color: blue;
}
/* the item i want to distinguish */
li.milk {
color: red;
}
/* next items */
li ~ li {
color: green;
}
<ul>
<li>Tea</li>
<li class="milk">Milk</li>
<li>Juice</li>
<li>others</li>
</ul>
Ik hoop dat het iemand helpt.
Antwoord 21
hier is de link voor een vergelijkbare vraag
CSS selecteer alle eerdere broers en zussen voor een sterbeoordeling
Dus ik post mijn oplossing met behulp van stukjes van ieders reacties en iedereen kan het als referentie gebruiken en eventueel verbeteringen aanbevelen.
// Just to check input value
// Consts
const starRadios = document.querySelectorAll('input[name="rating"]');
// EventListeners
starRadios.forEach((radio) => radio.addEventListener('change', getStarRadioValue));
// Get star radio value
function getStarRadioValue(event) {
alert(event.target.value)
// Do something with it
};
.star-rating {
font-size: 1.5rem;
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
}
.star-rating.editable label:hover {
cursor: pointer;
}
.star-rating.editable .icon-star:hover,
.star-rating.editable .icon-star:hover ~ .icon-star {
background-color: #fb2727 !important;
}
.icon-star {
position: relative;
background-color: #72747d;
width: 32px;
height: 32px;
display: inline-block;
transition: background-color 0.3s ease;
}
.icon-star.filled {
background-color: #fb2727;
}
.icon-star > label {
display: inline-block;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
.icon-star > label > input[type="radio"] {
position: absolute;
top: 0;
left: 0;
transform: translateY(50%) translateX(50%);
display: none;
}
<div class="star-rating editable">
<span class="icon-star">
<label>
<input type="radio" name="rating" value="5" />
</label>
</span>
<span class="icon-star">
<label>
<input type="radio" name="rating" value="4" />
</label>
</span>
<span class="icon-star">
<label>
<input type="radio" name="rating" value="3" />
</label>
</span>
<span class="icon-star">
<label>
<input type="radio" name="rating" value="2" />
</label>
</span>
<span class="icon-star">
<label>
<input type="radio" name="rating" value="1" />
</label>
</span>
</div>
Antwoord 22
Je kunt de html herschikken, de container instellen op flex of grid, en ook voor elk kind de eigenschap “order” instellen zodat het eruitziet zoals je wilt
Antwoord 23
Ik had hetzelfde probleem, terwijl ik probeerde het pictogram vulkleur op de invoerfocus te wijzigen, mijn code zag er zoiets uit:
<template #append>
<b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
</template>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />
Het probleem was dat ik een VUE-bootstrap slot gebruik om de prepagina te injecteren, dus zelfs als ik de locatie verander die nog steeds wordt weergegeven na de ingang
Nou, mijn oplossing was om hun locatie te vegen en aangepaste prepagina toe te voegen en gebruikt ~ symbool, omdat CSS niet de vorige broer of zus ondersteunt.
<div class="form-input-prepend">
<svg-vue icon="common.lock" />
</div>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />
SCSSS-stijl
.form-control:focus ~ .form-input-prepend {
svg path {
fill: $accent;
}
}
Probeer dus gewoon zijn positie te wijzigen, en gebruik zo nodig CSS bestelling of positie: absoluut; Om te bereiken wat u wilt en om te voorkomen dat JavaScript voor dit soort behoeften wordt gebruikt.
Antwoord 24
Er is geen dergelijke selector, maar in de DOM heeft API behoorlijk alleen-lezen onroerend goed
Node.previousSibling
https://developer.mozilla.org/en -US/docs/Web/API/Node/vorigeSibling