Existe-t-il un sélecteur "frère ou sœur précédent" ?

Question

Le signe plus ( + ) sert à sélectionner le frère ou la sœur suivant(e).

Existe-t-il un équivalent pour le frère ou la sœur précédent(e) ?

Answer 1

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

Sur une note connexe, ~ est pour le successeur général de l'élément frère (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 frère suivant et est CSS2.1.

Voir Combinateur de frères et sœurs adjacents de Sélecteurs Niveau 3 y 5.7 Sélecteurs de frères et sœurs adjacents de Spécification des feuilles de style en cascade niveau 2 révision 1 (CSS 2.1) .

Answer 2

Le niveau 4 des sélectionneurs propose :has() (précédemment l'indicateur de sujet ! ) qui, un jour, vous permettra de sélectionner un frère ou une sœur précédent(e) avec :

previous:has(+ next) {}

mais au moment où nous écrivons ces lignes Support du navigateur est pratiquement inexistant .

Answer 3

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

x ~ y

écrire

y ~ x

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

Je me rends compte que la question originale était une question sur les CSS et que cette réponse n'est probablement pas pertinente, mais d'autres utilisateurs de Javascript peuvent tomber sur la question par le biais d'une recherche comme je l'ai fait.

Answer 4

Il n'y a pas de moyen officiel de le faire pour le moment mais vous pouvez utiliser une petite astuce pour y parvenir ! N'oubliez pas qu'il s'agit d'une méthode expérimentale et qu'elle comporte certaines limitations ... (vérifier ce lien si vous vous inquiétez de la compatibilité avec le 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 sur la base des classes des éléments suivants.
• Il en va de même pour les pseudo-classes

Answer 5

Il n'existe malheureusement pas de sélecteur de frère ou sœur "précédent", mais vous pouvez éventuellement obtenir le même effet en utilisant le positionnement (par exemple, flotter à droite). Cela dépend de ce que vous essayez de faire.

Dans mon cas, je voulais un système d'évaluation principalement CSS 5 étoiles. J'aurais besoin de colorer les étoiles précédentes (ou d'en changer l'icône). En faisant flotter chaque élément à droite, j'obtiens essentiellement le même effet (le code html des étoiles doit donc être écrit "à l'envers").

J'utilise FontAwesome dans cet exemple et je 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/