[Résolu] Css et class

Bonjour,

j'ai une petite question pour savoir si ça existe.

j'utilise ce code pour pouvoir faire des petit trait en bas de chaque article d'un site sous joomla

.leading-0 {
border-bottom: 1px dotted black;
}

.leading-1 {
border-bottom: 1px dotted black;
}

.leading-2 {
border-bottom: 1px dotted black;
}

.leading-3 {
border-bottom: 1px dotted black;
}

donc ma question est: est ce qu'il y exite un code qui permettrait d'écrire ça juste avec un mot comme il suit

.leading-X {
border-bottom: 1px dotted black;
}

Merci d'avance
Modifié par Pacific (23 Feb 2014 - 18:43)

Bonjour,

un sélecteur css bien pratique à utiliser :

[class*="leading-"]

en gros il selectionnera tout les class de ta page contenant "leading-".

Ca marche aussi avec les id, les href, les ...
une petite page qui récapitule les sélecteurs css les plus importants : tutsplus. (il en existe surement en français, si l'anglais te gène.

bonne soirée
Modifié par thej8 (23 Feb 2014 - 19:22)

Bonsoir,

[class^="leading-"] /*éventuellement [class*="leading-"]*/{
  border-bottom: 1px dotted black;
}

* Ne pas construire de lego avec son fils lorsqu'on répond sur le forum...

Ah oui, je sais pourquoi j'ai retardé ma réponse
Suivant la structure de tes articles (si elle est répétitive), en fonction peut-être du Doctype choisit (section, article, etc... en HTML5) tu pourras sans doute cibler ces articles sans passer par l'ajout de classe(s) supplémentaire(s).
Là, le code me semble un peu lourd au regard de ce que tu veux faire

Réponse trés rapide !!! merci

ça change quoi le ^ ou le * ?

Pourquoi le code est lourd ?

et je veut pas qu'il se repete pour le dernier ? ça fonctionne comme ça

[class^="leading-"] + [class^="leading-"]{
border-bottom: 1px dotted black;
}

Modifié par Pacific (23 Feb 2014 - 20:02)

[attr^="stringValue"]

Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" commence exactement par la valeur "stringValue".

[attr*="stringValue"]

Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" comporte au moins une fois la valeur "stringValue".

Cf lien de thej8 ou sur developpez.com par exemple.

Je te laisse corriger ton code.

Pour une même "décoration", tu utilises autant de classes que tu as d'articles, c'est contre-productif, il faut penser réutilisabilité !
Encore une fois, il y a certainement moyen de cibler tes articles d'une autre manière, de générer cette bordure via la pseudo-classe :after, sans surcharger le code, et sans doute même de pouvoir exclure ton dernier article ( sélecteur d'exclusion :not(), last-child, etc...)

Merci pour ces compléments d'information.

Par contre concernant last-child, il me semble que j’avais lu que ce n'était pas compatible avec de vieux navigateurs.

Pacific a écrit :
Par contre concernant last-child, il me semble que j’avais lu que ce n'était pas compatible avec de vieux navigateurs.

Quel est le besoin concernant le support de ces vieux navigateurs ?
La solution à envisager dépendra du code HTML, des navigateurs à supporter, de ton niveau d'exigence vis à vis de ces derniers (dégradation gracieuse), du sens du vent, et de la rotation de la Terre (comprendre la solution en vogue à l'instant T)
Modifié par 6l20 (23 Feb 2014 - 22:49)