28172 sujets

CSS et mise en forme, CSS3

[Résolu] Selecteurs d'attributs et ordre des classes

Bonsoir,
Comment modifier ce style pour que cela fonctionne quel que soit l'ordre des classes.

[class^="grid-"]{
  display: grid;
  column-gap: 16px;				
  row-gap: 1.5rem;
}

Ce qui ne foncctionne pas :

<div class="site grid-body">
  <div class="site-header grid-container">
    <code>class="site-header grid-container"</code>
  </div>	
  <div class="site-main grid-content">
    <code>class="site-main grid-content"</code>
  </div>
  <div class="site-footer grid-container">
    <code>class="site-footer grid-container"</code>
  </div>
</div>

Mais avec ce code, cela fonctionne :

<div class="grid-body site">
  <div class="grid-container site-header">
    <code>class="grid-container site-header"</code>
  </div>
  <div class="grid-content site-main">
    <code>class="grid-content site-main"</code>
  </div>
  <div class="grid-container site-footer">
    <code>class="grid-container site-footer"</code>
  </div>
</div>

Modifié par cpalo (11 May 2022 - 06:50)
Bonsoir. Avec un astérisque :
[class*="grid-"]{
  display: grid;
  column-gap: 16px;				
  row-gap: 1.5rem;
}

Par contre, je ne vois pas l'intérêt de mettre le tiret derrière "grid" (ou derrière "button" sur votre autre topic).
Je vous donne un exemple de mes propres grilles où j'utilise aussi cette technique, sans tiret final, et sans conflit d'aucune sorte :

[class*=grid]
  display grid
  grid-auto-flow dense
  grid-template-columns minmax(0, 1fr)

[class*=grid].gap
  gap _gap

[class*=grid].vertical-gap
  gap 0 _gap

@media (min-width _sizeXS)

  .grid2
  .grid3
  .grid4
    grid-template-columns repeat(2, minmax(0, 1fr))

@media (min-width _sizeS)

  .grid3
  .grid4
    grid-template-columns repeat(3, minmax(0, 1fr))

@media (min-width _sizeL)

  .grid4
    grid-template-columns repeat(4, minmax(0, 1fr))

@media (max-width _sizeXS)

  .media-xs-grid2
    grid-template-columns repeat(2, minmax(0, 1fr))

// etc...

C'est écrit en Stylus, mais je pense que vous voyez l'idée...

Je peux ensuite faire du HTML comme ceci :
<div class="grid2 gap media-s-grid1">
  <div></div>
  <div></div>
</div>

Modifié par Olivier C (10 May 2022 - 22:15)
Meilleure solution
Bonsoir
a écrit :

Par contre, je ne vois pas l'intérêt de mettre le tiret derrière "grid" (ou derrière "button" sur votre autre topic).

Parce que j'utilise des classes avec des préfixes
 prefix-name

ou des modifiers
name--modifier

J'avais choisi le ^ pour indiquer que je sélectionnais les classes qui commençaient par grid-
mais en le remplaçant par * comme tu le proposes, cela fonctionne.
Modifié par cpalo (10 May 2022 - 22:41)
cpalo a écrit :
Parce que j'utilise des classes avec des préfixes [...] ou des modifiers

name--modifier

Il me semble alors que ce sont les préfixes et les suffixes qui devaient obtenir le tiret, et non le corps de la classe. Mais là, sans doute, je pinnaille...
cpalo a écrit :
J'avais choisi le ^ pour indiquer que je sélectionnais les classes qui commençaient par grid- mais en le remplaçant par * comme tu le proposes, cela fonctionne.

En fait cette syntaxe est inspirée des regex, il y a aussi le $. Notez que les guillemets sont facultatifs.
Bonjour,
.
a écrit :
il me semble alors que ce sont les préfixes et les suffixes qui devaient obtenir le tiret, et non le corps de la classe. Mais là, sans doute, je pinnaille..

Tu pourrais me donner un exemple car je ne vois pas trop la difference dans ce cas précis.
Avec :
[class*=grid] on sélectionne les trois tandis qu'avec [class*=grid--] on ne sélectionnera que grid--modifier

<div class="grid2"
<div class="grid-content"
<div class="grid--modifier"

Cordialement
Modifié par cpalo (11 May 2022 - 06:49)
Ah oui, effectivement, je n'avais pas vu tous ces cas d'utilisation.

Attention quand même à l'hétéroclisme pour le nommage des classes, ça risque d'être chaud à maintenir quand même.
Sujet clos
Aller à