Le signe plus ( +) est pour le prochain frère.

Y a-t-il un équivalent pour le frère précédent?

Non, il n'y a pas de sélecteur "frère précédent".

Sur une note connexe, ~est pour le frère successeur général (ce qui signifie que l'élément vient après celui-ci, mais pas nécessairement immédiatement après) et est un sélecteur CSS3. +est pour le prochain frère et est CSS2.1.

Voir Combinateur frère adjacent des sélecteurs de niveau 3 et 5.7 Sélecteurs frère adjacent des feuilles de style en cascade, niveau 2, révision 2 (CSS 2.1) .

J'ai trouvé un moyen de styliser tous les frères et sœurs précédents (à l'opposé de ~) qui peuvent fonctionner selon ce dont vous avez besoin.

Supposons que vous ayez une liste de liens et que lorsque vous passez la souris dessus, tous les précédents devraient devenir rouges. Vous pouvez le faire comme ceci:

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

Sélecteurs de niveau 4 introduit:has() (auparavant l'indicateur de sujet !) qui vous permettra de sélectionner un frère précédent avec:

previous:has(+ next) {}

… Mais au moment de la rédaction de ce document, la distance est au-delà du bord de saignement pour la prise en charge du navigateur.

Considérez la orderpropriété des dispositions de flexion et de grille.

Je vais me concentrer sur flexbox dans les exemples ci-dessous, mais les mêmes concepts s'appliquent à Grid.

Avec flexbox, un sélecteur de frère précédent peut être simulé.

En particulier, la orderpropriété flex peut déplacer des éléments autour de l'écran.

Voici un exemple:

Vous voulez que l'élément A devienne rouge lorsque l'élément B est survolé.

<ul>
    <li>A</li>
    <li>B</li>
</ul>

PAS

1. Faites ulun récipient flexible.
   
   

   ul { display: flex; }

2. Inversez l'ordre des frères et sœurs dans la majoration.
   
   

   <ul>
      <li>B</li>
      <li>A</li>
   </ul>

3. Utilisez un sélecteur frère pour cibler l'élément A ( ~ou +fera l'affaire).
   
   

   li:hover + li { background-color: red; }

4. Utilisez la orderpropriété flex pour restaurer l'ordre des frères et sœurs sur l'affichage visuel.
   
   

   li:last-child { order: -1; }

... et voilà! Un ancien sélecteur de frères et sœurs est né (ou du moins simulé).

Voici le code complet:

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>

De la spécification flexbox:

5.4. Ordre d'affichage: la orderpropriété

Les éléments Flex sont, par défaut, affichés et disposés dans le même ordre qu'ils apparaissent dans le document source. La orderpropriété peut être utilisée pour modifier cet ordre.

La orderpropriété contrôle l'ordre dans lequel les éléments flexibles apparaissent dans le conteneur flex, en les affectant à des groupes ordinaux. Il prend une seule <integer>valeur, qui spécifie à quel groupe ordinal l'élément flex appartient.

La première order valeur pour tous les éléments flexibles est 0.

Voir également orderdans la spécification CSS Grid Layout .

Exemples de "sélecteurs de frères précédents" créés avec la orderpropriété flex .

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsFiddle

Une note latérale - Deux croyances obsolètes sur CSS

Flexbox brise les croyances de longue date sur CSS.

L'une de ces croyances est qu'un sélecteur de frère précédent n'est pas possible en CSS .

Dire que cette croyance est répandue serait un euphémisme. Voici un échantillon de questions connexes sur Stack Overflow seul:

• Sélectionnez le frère précédent d'un élément en CSS à l'aide de sélecteurs
• CSS: sélectionner le frère précédent
• CSS sélectionner le frère précédent
• Sélecteur adjacent précédent en CSS
• Sélectionner les frères et sœurs précédents en survol
• Sélecteur CSS pour obtenir le frère précédent
• Changer la couleur des éléments frères en survol à l'aide de CSS
• Comment sélectionner le frère précédent en utilisant la syntaxe CSS sélénium
• Sélecteur CSS pour sélectionner un élément qui vient AVANT un autre élément?
• Comment ajouter un style au frère précédent de l'entrée active en utilisant uniquement CSS
• Sélecteur CSS pour les éléments suivants et précédents
• Comment affecter d'autres éléments lors du survol d'un div

Comme décrit ci-dessus, cette croyance n'est pas entièrement vraie. Un sélecteur frère précédent peut être simulé en CSS à l'aide de la orderpropriété flex .

Le z-indexmythe

Une autre croyance de longue date est que z-index ne fonctionne que sur les éléments positionnés.

En fait, la version la plus récente de la spécification - le projet de l'éditeur du W3C - affirme toujours que cela est vrai:

9.9.1 Spécification du niveau de pile: la z-index propriété

z-index

• Valeur: auto | | hériter
• Initiale: auto
• S'applique à: éléments positionnés
• Hérité: non
• Pourcentages: N / A
• Média: visuel
• Valeur calculée: comme spécifié

_{(pas d'italique dans l'original)}

En réalité, cependant, ces informations sont obsolètes et inexactes.

Les éléments qui sont des éléments flexibles ou des éléments de grille peuvent créer des contextes d'empilement même lorsqu'ils le positionsont static.

4.3. Commande flexible d'articles Z

Les éléments flexibles peignent exactement la même chose que les blocs en ligne, sauf que l'ordre des documents modifié par ordre est utilisé à la place de l'ordre des documents bruts et des z-indexvaleurs autres queauto création d'un contexte d'empilement, même siposition eststatic .

5.4. Ordre de l'axe Z: lez-index propriété

L'ordre de peinture des éléments de la grille est exactement le même que celui des blocs en ligne, sauf que l'ordre des documents modifié par l'ordre est utilisé à la place de l'ordre des documents bruts et des z-indexvaleurs autres que la autocréation d'un contexte d'empilement, même si position eststatic .

Voici une démonstration du z-indextravail sur des éléments flex non positionnés: https://jsfiddle.net/m0wddwxs/

J'avais la même question, mais ensuite j'ai eu un moment "duh". Au lieu d'écrire

x ~ y

écrire

y ~ x

Évidemment, cela correspond à "x" au lieu de "y", mais il répond au "y a-t-il une correspondance?" question, et une simple traversée DOM peut vous amener au bon élément plus efficacement que de boucler en javascript.

Je me rends compte que la question d'origine était une question CSS, donc cette réponse est probablement complètement hors de propos, mais d'autres utilisateurs Javascript peuvent tomber sur la question via la recherche comme je l'ai fait.

Deux astuces . Fondamentalement, inverser l'ordre HTML de vos éléments souhaités en HTML et utiliser l' opérateur
~ Next siblings :

float-right + inverser l'ordre des éléments HTML

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>

Parent avec direction: rtl;+ inverse l'ordre des éléments internes

.inverse{
  direction: rtl;
  display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:gold;
}

Hover one span and see the previous elements being targeted!<br>

<div class="inverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

+est pour le prochain frère. Y a-t-il un équivalent pour le frère précédent?

Vous pouvez utiliser les deux sélecteurs de haches :! et?

Il y a 2 sélecteurs de frères et sœurs subséquents en CSS conventionnel:

• +est l' immédiat sélecteur frère / sœur suivant
• ~est le tout sélecteur de fratrie ultérieur

En CSS conventionnel, il n'y a pas de sélecteur de frère précédent .

Cependant, dans la bibliothèque de post-processeur ax ax CSS, il y a 2 sélecteurs frères précédents :

• ?est le sélecteur frère immédiat immédiat (opposé à+ )
• !est le tout sélecteur de frère précédent ( à l' opposé de ~)

Exemple de travail:

Dans l'exemple ci-dessous:

• .any-subsequent:hover ~ div sélectionne tout div
• .immediate-subsequent:hover + div sélectionne le suivant immédiat div
• .any-previous:hover ! div sélectionne tout précédent div
• .immediate-previous:hover ? div sélectionne le précédent immédiat div

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>

Une autre solution flexbox

Vous pouvez utiliser l'ordre inverse des éléments en HTML. Ensuite, en plus d'utiliser ordercomme dans la réponse de Michael_B, vous pouvez utiliser flex-direction: row-reverse;ouflex-direction: column-reverse; fonction de votre mise en page.

Échantillon de travail:

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

Il n'y a aucun moyen officiel de le faire pour le moment mais vous pouvez utiliser une petite astuce pour y parvenir! N'oubliez pas qu'il est expérimental et qu'il a des limites ... (vérifiez ce lien si vous vous inquiétez de la compatibilité du navigateur)

Ce que vous pouvez faire, c'est utiliser un sélecteur CSS3: la pseudo classe appelée 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>

Limites

• Vous ne pouvez pas sélectionner les éléments précédents en fonction des classes des éléments suivants
• C'est la même chose pour les pseudo-classes

Si vous connaissez la position exacte, une :nth-child()exclusion basée sur tous les frères et sœurs suivants fonctionnerait.

ul li:not(:nth-child(n+3))

Qui sélectionnerait tous les lis avant le 3ème (par exemple 1er et 2ème). Mais, à mon avis, cela semble moche et a un cas d'utilisation très serré.

Vous pouvez également sélectionner le nième enfant de droite à gauche:

ul li:nth-child(-n+2)

Ce qui fait la même chose.

Non, ce n'est pas possible via CSS. Il prend à cœur la "Cascade" ;-).

Cependant, si vous pouvez ajouter JavaScript à votre page, un peu de jQuery pourrait vous permettre d'atteindre votre objectif final.
Vous pouvez utiliser jQuery findpour effectuer une "anticipation" sur votre élément / classe / id cible, puis revenir en arrière pour sélectionner votre cible.
Ensuite, vous utilisez jQuery pour réécrire le DOM (CSS) pour votre élément.

Sur la base de cette réponse de Mike Brant , l'extrait de code jQuery suivant pourrait vous aider.

$('p + ul').prev('p')

Cette première sélectionne tous les <ul>s qui suivent immédiatement a <p>.
Ensuite, il "revient en arrière" pour sélectionner tous les <p>s précédents de cet ensemble de <ul>s.

En effet, "frère précédent" a été sélectionné via jQuery.
Maintenant, utilisez la .cssfonction pour passer vos nouvelles valeurs CSS pour cet élément.

Dans mon cas, je cherchais un moyen de sélectionner un DIV avec l'id #full-width, mais UNIQUEMENT s'il avait un DIV descendant (indirect) avec la classe de .companies.

J'avais le contrôle de tout le HTML sous .companies, mais je ne pouvais pas modifier le HTML au-dessus.
Et la cascade ne va que dans un sens: vers le bas.

Ainsi, je pouvais sélectionner TOUS les #full-widths.
Ou je pourrais sélectionner .companiesqui a seulement suivi a #full-width.
Mais je ne pouvais pas sélectionner uniquement les #full-widths qui se déroulaient .companies .

Et, encore une fois, je n'ai pas pu ajouter .companies plus haut dans le HTML. Cette partie du code HTML a été écrite en externe et a enveloppé notre code.

Mais avec jQuery, je peux sélectionner les #full-widths requis , puis attribuer le style approprié:

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

Cela trouve tout #full-width .companies, et sélectionne seulement ceux-ci .companies, de la même manière que les sélecteurs sont utilisés pour cibler des éléments spécifiques en standard en CSS.
Ensuite, il utilise .parentspour "revenir en arrière" et sélectionner TOUS les parents de .companies,
mais filtre ces résultats pour ne conserver que les #fill-widthéléments, de sorte qu'à la fin,
il ne sélectionne un #full-widthélément que s'il a un .companiesdescendant de classe.
Enfin, il attribue une nouvelle widthvaleur CSS ( ) à l'élément résultant.

$(".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>

Documents de référence jQuery:
$ () ou jQuery () : élément DOM.
. find : récupère les descendants de chaque élément dans l'ensemble actuel d'éléments correspondants, filtré par un sélecteur, un objet jQuery ou un élément.
. parents : Obtenez le frère immédiatement précédent de chaque élément dans l'ensemble des éléments correspondants. Si un sélecteur est fourni, il ne récupère le frère précédent que s'il correspond à ce sélecteur (filtre les résultats pour n'inclure que les éléments / sélecteurs répertoriés).
. css : définissez une ou plusieurs propriétés CSS pour l'ensemble des éléments correspondants.

Il n'y a malheureusement pas de sélecteur de frère "précédent", mais vous pouvez éventuellement encore obtenir le même effet en utilisant le positionnement (par exemple le droit à flotteur). Cela dépend de ce que vous essayez de faire.

Dans mon cas, je voulais un système de notation 5 étoiles principalement CSS. Il faudrait que je colorie (ou permute l'icône) des étoiles précédentes. En flottant chaque élément à droite, j'obtiens essentiellement le même effet (le html pour les étoiles doit donc être écrit «à l'envers»).

J'utilise FontAwesome dans cet exemple et permute entre les unicodes de fa-star-o et 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/

Selon votre objectif exact, il existe un moyen de réaliser l'utilité d'un sélecteur de parents sans en utiliser un (même s'il en existait un) ...

Disons que nous avons:

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

Que pouvons-nous faire pour que le bloc de chaussettes (y compris les couleurs de chaussettes) se démarque visuellement en utilisant l'espacement?

Ce qui serait bien mais n'existe pas:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

Ce qui existe:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

Cela définit tous les liens d'ancrage pour avoir une marge de 15 pixels en haut et la réinitialise à 0 pour ceux sans éléments UL (ou autres balises) à l'intérieur des LI.

J'avais besoin d'une solution pour sélectionner le frère précédent tr. J'ai trouvé cette solution en utilisant des composants React et Styled. Ce n'est pas ma solution exacte (c'est de mémoire, des heures plus tard). Je sais qu'il y a une faille dans la fonction setHighlighterRow.

OnMouseOver une ligne définira l'index de ligne à l'état et rendra la ligne précédente avec une nouvelle couleur d'arrière-plan

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;
    }
`;

Il n'y a pas, et il y a .

Si vous devez placer l'étiquette avant l'entrée, au lieu de la placer après l'entrée, conservez à la fois l'étiquette et l'entrée dans un div et stylisez le div comme suit:

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

Vous pouvez maintenant appliquer les options de style frère suivant standard disponibles dans css, et cela apparaîtra comme si vous utilisiez un style frère précédent.

J'ai eu un problème similaire et j'ai découvert que tous les problèmes de cette nature peuvent être résolus comme suit:

1. donnez un style à tous vos articles.
2. donnez un style à votre article sélectionné.
3. donnez aux éléments suivants un style en utilisant + ou ~.

et de cette façon, vous pourrez styliser vos éléments actuels et précédents (tous les éléments remplacés par les éléments actuels et suivants) et vos prochains éléments.

exemple:

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

J'espère que cela aide quelqu'un.