Sélection d'une classe et premier 3 du reste; nth-child et nth-of-type inutile

J'ai un élément du DOM (#installations) avec un certain nombre d'enfants, un seul d'entre eux dispose d'une classe .sélectionné. J'ai besoin de sélectionner cette classe et les 3 premiers du reste (:not(.sélectionné)) et de leur montrer - le but est d'avoir seulement 4 éléments, indépendamment de l'élément a de la classe .sélectionné.

Le problème est que, dans l'expression:

#installations > *:not(.selected):nth-of-type(-n+3), .selected

:nth-of-type() ignore le :not() sélecteur et choisit les 3 premiers enfants de #installation. Par exemple, si j'ai ce code HTML:

<div id="installations">
    <div id="one"/>
    <div id="two"/>
    <div id="three" class="selected"/>
    <div id="four"/>
    <div id="five"/>
</div>

J'y aura seulement une, deux, trois et pas dans les quatre premiers. L'implication logique est que :nth-of-type() aura seulement (un, deux, quatre, cinq) pour sélectionner à partir, depuis :not() déjà exclus du choisi, donc la sélection de (un, deux, quatre), et puis l'autre partie de la sélection .selected va ajouter l'élément sélectionné.

Si .sélectionnée n'est pas dans les quatre premiers éléments, disons que c'est la sixième, nous aurons les trois premiers + sixième éléments sélectionnés.

À clarifier: la sélection .sélectionné plus 3 les éléments adjacents est aussi très bien. Cependant, je il est également difficile dans cas .sélectionné est dans les 3 derniers (si l'on a sélectionné les 3 éléments adjacents)

source d'informationauteur Ivo

33

Comme mentionné dans mon commentaire, les pseudo-classes ne sont pas traitées de manière séquentielle; ils sont tous évalués ensemble sur chacun de vos éléments. Voir cette réponse pour plus de détails.

Après un peu de bricolage, compte tenu de votre code HTML et les conditions de sélectionner des éléments, je suis venu avec la suivante, long liste de sélecteurs:
```
/* The first three children will always be selected at minimum */
#installations > div:nth-child(-n+3),
/* Select .selected if it's not among the first three children */
#installations > div.selected,
/* If .selected is among the first three children, select the fourth */
#installations > div.selected:nth-child(-n+3) ~ div:nth-child(4)
```
Pour ce travail, une hypothèse simple: le selected classe n'apparaîtra que sur un seul élément à la fois.

Vous aurez besoin de combiner tous les trois sélecteurs dans la même règle, afin de faire correspondre les quatre éléments que vous recherchez. Avis de la virgule dans mon code.

Interactive jsFiddle démo (pour tester le sélecteur avec la classe dans différents éléments d'enfant)

Pour ce que ça vaut, c'est plus facile si vous pouvez revenir à JavaScript. Par exemple, si vous utilisez jQuery, son :lt() sélecteur rend les choses un peu plus simple:
```
//Apply styles using this selector instead: #installations > div.with-jquery
$('#installations')
    .children('div.selected, div:not(.selected):lt(3)')
    .addClass('with-jquery');
```
Interactive jsFiddle démo (ignorer le code JS dans cette démo, c'est seulement là pour le rendre interactif)

Ce que vous devez utiliser sont adjacentes, de frère, de sélecteurs. Voici un exemple que j'ai cuisiné qui fonctionne dans Safari (pas testé ailleurs). Seulement "Deux", "Trois" et "Quatre" éléments sont affichés.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .the-list li {display:none;}
      .the-list li.selected {display:block;}
      .the-list li.selected + li {display:block;}
      .the-list li.selected + li + li {display:block;}
    </style>
  </head>
  <body>
    <ol class='the-list'>
      <li>One</li>
      <li class='selected'>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ol>
  </body>
</html>

Vous devez vous connecter pour publier un commentaire.