28172 sujets

CSS et mise en forme, CSS3

[Résolu] E sélecteur :not ne fonctionne pas avec des sélecteurs css co

Voici mon code html : 

<div data-id="1">
<p>Bonjour</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
<div data-id="2">
<i>Lorem ipsum dolor sit amet, consectetur adipisicing</i>
</div>


Voici mon sélecteur css :

*:not([data-id], [data-id] *)

Il a pour but de sélectionner tous les éléments sauf ceux avec l'attribut data-id et ses enfants

Le sélecteur fonctionne sur Safari mais pas sur Chrome ni sur Firefox

Avez vous une idée de comment faire pour le faire fonctionner partout ?
Modérateur
Salut,

Tu es sur qu'il fonctionne sur Safari ?

Déjà si tu met pas "body" devant, vu que body ne doit pas contenir de data-id il doit prendre toutes les balises par défaut.
Ensuite ta formulation est étrange... :not(a, b) veut dire une balise qui a ni a ni b et je ne pense pas qu'on puisse donner une indication sur l’ancêtre de la balise de cette façon...

En gros je ne suis pas sur que cette facon de procéder soit réalisable.

Que cherche-tu à faire ? Il y a peut etre un moyen plus simple...
/!\ MESSAGE FAUX regarder directement la suite svp

Salut,
J'ai mis ici qu'un morceau du code, c'est pour ça qu'il n'y a pas le body.
Après plus de test, je me suis rendu compte que cela ne fonctionne pas sur safari : chrome ne sélectionne aucun élément alors que avec le même sélecteur, safari sélectionne tous les éléments.

Bon but avec ce sélecteur est de sélectionner tous les éléments avec l'attribut data-id ainsi que tous les "enfants" de cet élément.

Voici mon code en entier :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <style>
      *:not([data-id], [data-id] *){
        color: red;
      }
    </style>

    <title>Sélecteur css</title>
  </head>
  <body>

    <div data-id="1"> <!--Cette balise doit être sélectionné-->
      <p><!--Cette balise doit être sélectionné-->
        Lorem ipsum dolor sit amet, consectetur adipisicing
      </p>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>

    <div data-id="2"><!--Cette balise doit être sélectionné-->
      <i><!--Cette balise doit être sélectionné-->
        Lorem ipsum dolor sit amet, consectetur adipisicing
      </i>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>

    <p data-id="3"><!--Cette balise doit être sélectionné-->
      Lorem ipsum dolor sit amet, consectetur adipisicing
    </p>

  </body>
</html>


Merci pour votre aide
Modifié par Tupix (15 Apr 2019 - 16:20)
Modérateur
Tupix a écrit :
Bon but avec ce sélecteur est de sélectionner tous les éléments avec l'attribut data-id ainsi que tous les "enfants" de cet élément.


Heu... et bien 
[data-id],
[data-id] * {
  color: red;
}

https://jsfiddle.net/undless/Luy8sn2c/28/

Je en sais pas si tu t'es planté vu que c'est l'inverse de ce que tu demande dans ton premier post :

Tupix a écrit :
Il a pour but de sélectionner tous les éléments sauf ceux avec l'attribut data-id et ses enfants
Je me suis effectivement planté lors de la rédaction du dernier message.

C'est pourquoi je vais représenter mon problème :
Je cherche à l'aide de sélecteur css à sélectionner TOUT les éléments de la page SAUF ceux qui possède l'attribut data-id et ses enfants. Voici un exemple : 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"><title>Sélecteur css</title>

    <style>
/*La ligne juste en dessous est celle qui ne fonctionne pas*/
      *:not([data-id], [data-id] *){
        color: red;
      }
    </style>

  </head>
  <body>

    <div data-id="1"> <!--Cette balise NE doit PAS être sélectionné-->
      <p><!--Cette balise NE doit PAS être sélectionné-->
        Lorem ipsum dolor sit amet, consectetur adipisicing
      </p>
    </div>

    <p>
      Lorem ipsum dolor sit amet,
      <strong data-id="4"> <!--Cette balise NE doit PAS être sélectionné-->
        consectetur adipisicing
      </strong>
    </p>

    <div data-id="2"><!--Cette balise NE doit PAS être sélectionné-->
      <i><!--Cette balise NE doit PAS être sélectionné-->
        Lorem ipsum dolor sit amet, consectetur adipisicing
      </i>
    </div>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing
    </p>

    <p data-id="3"><!--Cette balise NE doit PAS être sélectionné-->
      Lorem ipsum dolor sit amet, consectetur adipisicing
    </p>

  </body>
</html>


C'est pourquoi j'ai pensé à sélectionner tous les éléments : 
*

Sauf ceux qui possède l'attribut data-id 
:not([data-id])
(jusque là ça fonctionne)

Sauf les enfants des éléments qui possède l'attribut data-id 
:not([data-id], [data-id] *)

Je suis donc arrivé à ceci : 
 *:not([data-id], [data-id] *)


Mais cela ne marche pas !

Désolé pour l'incohérence de mes précédent message
Merci pour votre aide
Modifié par Tupix (15 Apr 2019 - 16:26)
Modérateur
Tupix a écrit :
Je me suis effectivement planté lors de la rédaction du dernier message.

Smiley lol

Tupix a écrit :
*:not([data-id], [data-id] *)

Mais cela ne marche pas !

Malheureusement on ne peut pas mettre de sélecteur complexe comme [data-id] * dans un :not :
W3C a écrit :
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.

https://www.w3.org/TR/selectors-3/#negation


Tupix a écrit :
Désolé pour l'incohérence de mes précédent message
Pas de soucis Smiley smile

En solution, selon ce que tu veux faire, je te propose de faire l'inverse. On sait sélectionner tout les éléments data-id et ses enfants, mais pas l'inverse. On a donc qu'a donner l'état sélectionné par défaut a tout le monde, puis effacer ce qu'on vient de faire pour exclure ce qu'on sait sélectionner : 
body * {
  color: red;
}

[data-id],
[data-id] * {
  color: black;
}

https://jsfiddle.net/undless/Luy8sn2c/35/

A prendre avec des pincette car sur un gros site le body * peut etre très coûteux. Si cela ne concerne qu'une partie du texte autant creer un conteneur et mettre un id dessus pour jouer dedans en CSS sans impacter le reste du site.
Cela peut effectivement fonctionner.
Ce sélecteur css n'avait seulement pas pour but d'être utilisé en css Smiley biggrin ! Je ne l'avais pas dis car je ne pensais pas que l'on n'arriverait pas à faire fonctionner mon sélecteur avec le :not.

Ce que je souhaitais réelement faire c'est enregistrer tous ces éléments dans une variable en javascript : 

let elements = document.querySelectorAll('body *:not([data-id], [data-id] *)')


La technique précédemment décrite ne fonctionne donc plus. Et j'ai de nouveau besoin d'aide ! Smiley sweatdrop

Merci pour la précédente réponse comme même
Modérateur
Tupix a écrit :
Ce sélecteur css n'avait seulement pas pour but d'être utilisé en css Smiley biggrin ! Je ne l'avais pas dis car je ne pensais pas que l'on n'arriverait pas à faire fonctionner mon sélecteur avec le :not.

Ce que je souhaitais réelement faire c'est enregistrer tous ces éléments dans une variable en javascript :


Smiley sweatdrop ha oui effectivement ca change la donne... mais avec du Js on peut faire des trucs plus complexe que le CSS pur. Par contre j'ai plus le temps de m'y coller. Je regarde plus tard ou demain si j'ai le temps.

Bon courage
Salut,
après quelques essais, je suis arrive à un résultat qui fonctionne en javascript : 

let all = document.querySelectorAll('body *')
let dataId = document.querySelectorAll('[data-id], [data-id] *')
let result = []
all.forEach(el => {
  let isIn
  dataId.forEach(elem => {
    elem === el ? isIn = true : null
  });
  !isIn ? result.push(el) : null
})
Meilleure solution
il te suffisait juste d'ajouter une classe à tes éléments ayant un data-id, c’est vraiment se compliquer la vie pour rien... Smiley smile
Salut,
Cela serait possible pour des projets simples mais ne convient pas dans le projet que je souhaite mener ! Smiley eek
Sujet clos
Aller à