J'ai cette situation

<div class="hidden">
  <input name="bar-foo" value="test"> 
</div>
<div class="hidden">
  <input name="bar-foo-baz" value="test2">
</div>
<div class="nothidden">
  <input name="bar-foo" value="test3"> <!-- should be selected -->
</div>
<div class="nothidden">
  <input name="foo-bar-baz" value="test4"> <!-- should be selected -->
</div>

J'ai besoin de faire correspondre les entrées contenant le mot foo et bar, non contenues dans un div dont la classe est «cachée».

input[name*="foo"][name*="bar"] 

Correspond aux quatre entrées.

:not(.hidden) input[name*="foo"][name*="bar"]

À mon avis, devrait correspondre aux entrées non contenues dans quelque chose avec la classe «.hidden», mais ce n'est pas le cas. Comment obtenir ce résultat?

Voici un jsfiddle https://jsfiddle.net/8dLbz5ws/1/

1
Sasha Grievus 15 nov. 2017 à 19:44

4 réponses

Meilleure réponse

Votre deuxième sélecteur :not(.hidden) input[name*="foo"][name*="bar"] correspond à toutes les entrées car elles sont toutes contenues dans un élément qui n'a pas la classe masquée (par exemple le body ou un autre div parent).

Vous pouvez résoudre le problème en étant plus précis:

:not(.hidden) > input[name*="foo"][name*="bar"]

Cela éliminera ceux qui ont .hidden parents directs.


ÉDITER

Certains commentateurs aimeraient savoir comment sélectionner toutes les entrées en question qui ne sont contenues dans aucun .hidden élément (pas nécessairement un parent direct). C'est un problème plus difficile. Le suivant:

input[name*="foo"][name*="bar"]:not(.hidden input)

Ne semble pas fonctionner, je pense parce que :not n'autorise que des sélecteurs relativement simples à l'intérieur. La seule façon dont je peux penser est de mettre à jour toutes les entrées choisies, puis de les annuler la mise à jour lorsqu'elles se trouvent dans l'un des éléments .hidden:

input[name*="foo"][name*="bar"] { color: red; }
.hidden input[name*="foo"][name*="bar"] { color: black; }

Cela ne fonctionnera que si les paramètres par défaut (ie color: black) sont uniformes, j'en ai peur.

7
arbuthnott 15 nov. 2017 à 17:42

Essayez de cibler uniquement les enfants directs de vos classes qui ne sont pas masqués, comme ceci:

:not(.hidden) > input[name*="foo"][name*="bar"] { color:blue; }
1
Sorix 15 nov. 2017 à 16:49

Changer comme ça:

div:not(.hidden) input[name*="foo"][name*="bar"] {
    background-color: yellow;
}
div:not(.hidden) input[name*="foo"][name*="bar"] {
	background-color: yellow;
}
<div class="hidden">
  <input name="bar-foo" value="test"> 
</div>
<div class="hidden">
  <input name="bar-foo-baz" value="test2">
</div>
<div class="nothidden">
  <input name="bar-foo" value="test3"> <!-- should be selected -->
</div>
<div class="nothidden">
  <input name="foo-bar-baz" value="test4"> <!-- should be selected -->
</div>
1
Ehsan 15 nov. 2017 à 16:48

Cela a fonctionné pour moi.

https://jsfiddle.net/1dd2a3sw/

div:not(.hidden) input[name*="foo"][name*="bar"] {
  color:red;
}
1
bassxzero 15 nov. 2017 à 16:47
47312897