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>

<ul>
  <li>before</li>
  <li class="target">target</li>
  <li>after</li>
  <li>after</li>
</ul>

ul > li { color: red; }
ul > li.target, ul > li.target ~ li { color: inherit; }

/* 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>

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

<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" />

<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" />

.form-control:focus ~ .form-input-prepend {
    svg path {
        fill: $accent;
    }
}