Comment écrire une liste dynamique incrémentale en CSS ?

Bonjour,

J'ai une css formée ainsi:
.macss-n {}

où n est une variable crée en php

Ainsi je vais avoir

.macss-1 {}
.macss-2 {}
.macss-3 {}

etc...

Toutes ces css vont êtres identiques j'ai juste besoin de savoir comment écrire correctement mon fichier css sans avoir à écrire .macss-1, .macss-2, .macss-3 etc... jusqu'à 100

Y'a t-il un moyen d'écrire .macss-n ?

J'espère que ma question est assez claire

J'ai besoin de différencier toutes ces css car à un moment je vais appeller par exemple .macss-3 {display: none;}

Merci par avance pour vos réponses,

Cotp

Salut,

Alors soit dans ton php tu crée une class commune .macss en plus de ta classe spécifique à chaque élément soit tu prend l'otpion du sélecteur :

[class^="macss-"]{
    /* css */
}

qui prend toutes les classes qui commencent par "macss-".

Bon code

_laurent a écrit :
Salut,

Alors soit dans ton php tu crée une class commune .macss en plus de ta classe spécifique à chaque élément soit tu prend l'otpion du sélecteur :

[class^="macss-"]{
    /* css */
}

qui prend toutes les classes qui commencent par "macss-".

Bon code

Merci Laurent pour ton aide.

1) Si je prends cette 2e option et que ma classe se trouve au milieu d'autres exemple:

.totocss, tatacss, titicss, .macss-1, .macss-2, macss-3

Est-ce que je peux écrire ?:

.totocss, tatacss, titicss, .class^="macss-"


2) Autre chose comment je gère les classes du type:

.totocss.titicss.mass-1, .totocss.titicsss.mass-2, .totocss.titicsss.mass-3

Est-ce que je peux écrire ?:

.totocss.titicss.mass.class^="macss-"

ou

.class^=".totocss.titicss.mass-"

Waou

Salut,

Si tu as plusieurs classes sur un élément et que tu veux sélectionner tout de même .macss-n ça fonctionne de la même manière que te l'a expliqué Laurent, il faut juste que ce soit la première classe :

<div class="macss-2 toto tata"></div>

[class^='macss-']{
  color: white;
}

Si tu veux appliquer un même style a différentes classes, le sélecteur fonctionne de la même manière que les autres :

[class^='macss-'],
.classfoo,
span{
  color: white;
}

Je ne saurais que trop de conseiller de lire attentivement cette page concernant les sélecteurs CSS.

Je pense cependant que la manière la plus pertinente serait d'appliquer une classe commune à tous tes éléments (par exemple .macss) et d'y ajouter ensuite ta classe spécifique : .macss-n :

<div class="toto macss macss-54"></div>

.macss{
  color: white;
}
.macss-54{
  display: none;
}

Modifié par MatthieuR (04 Jun 2015 - 23:11)

MatthieuR a écrit :
Je pense cependant que la manière la plus pertinente serait d'appliquer une classe commune à tous tes éléments (par exemple .macss) et d'y ajouter ensuite ta classe spécifique : .macss-n

+10 pour la classe commune. C'est le plus propre et le plus pertinent.

Sinon, pour le reste et la science :

Cotp a écrit :
1) [...]
Est-ce que je peux écrire ?:
.totocss, tatacss, titicss, .class^="macss-"

ça s'écrit entre "crochets" et sans le point devant (le point est un sélecteur de classe, là on ne cherche pas vraiment une classe mais plutot le contenu d'un attribut, que ce soit class ou href etc..) donc oui comme ça :

.totocss,
.tatacss,
.titicss,
[class^="macss-"]

Cotp a écrit :
2) [...]
Est-ce que je peux écrire ?:
.totocss.titicss.mass.class^="macss-"

Oui aussi, et toujours avec les "crochets" :

.totocss.tatacss.titicss[class^="macss-"]

Et pour finir, avec [class^="macss-"] il faut effectivement que l'attribut commence par "macss-". Mais il existe des variantes comme [class*="macss-"] qui permet de sélectionner si l'attribut contient "macss-" donc pas forcément au début. Ça s'utilise pareil.

[class*="macss-"]

Bonne journée vous deux !
Modifié par _laurent (05 Jun 2015 - 08:36)

Pour bien comprendre le sélecteur d'attribut en fait ça n'est pas lié à une classe mais à un attribut.
Tu pourrais par exemple avoir une balise comme ça :

<div class="foo macss-31" data-css="macss"></div>

[data-css="macss"]{
  color: white;
}
.macss-31{
  display: none;
}

Cette dernière partie CSS sélectionnera bien tous les éléments portant un attribut data-css qui sera égal à "macss".

C'est tordu, aucun intérêt ici, mais c'est juste pour l'exemple et l'explication.

Bonjour,

Je pense qu'il serait intéressant de nous expliquer pourquoi tu as besoin d'autant de classes, c1, c2, ... c100. A mon avis il y a une bonne probabilité pour qu'il y ait un moyen de simplifier et que tu n'aies pas réellement besoin de 100 classes pour obtenir le résultat que tu veux.

L'autre piste à essayer est peut-être dans les pseudo-classes du type nth-child, ou je crois qu'il existe même :odd et :even pour les alternances; appliquable ou pas, ça dépend beaucoup de ce que tu cherches à faire.

Les suggestions proposées, [class^=...] ou [class*=...] fonctionne sauf peut-être sur les vieux IE, mais peut s'accompagner d'effets de bords imprévisibles qui ont des chances de te retomber dessus plus tard (p.ex. le ^= qui ne match la classe que si c'est la première listée; le $= pareil si c'est la dernière uniquement; le *= qui match des choses rien à voir comme "truc" dans "machintruchose", etc.). Ce serait mieux si tu les évitais, on ne sait jamais.