Discussion :

[NooR251]

Bonjour
J'ai un template prédéfinis dont j'ai récupéré un bout de code HTML représentant un menu accordiant (FAQ) que veux intégrer sur mon site.
Le souci est que quand j'intègre le fichier css qui style ce bout de code ça s'applique sur toute la page alor que je veux l'appliquer que sur la partie HTML que j'ai rajouté.
Autrement dit le nouveau style CSS interagit avec celui par défaut.
Donc ma question est si je peux appliquer ce fichier css juste sur le bout de code HTML ( en section ou div) ?
Pour info: le fichier css est volumineux et un peu chargé donc ça m'est impossible de procéder par id ou class ou de cibler toutes les balises de la partie concernée
En plus le template dont j'ai récupéré le menu accordiant utilise trois fichier css à savoir font, style et boostrape.
Pouvez vous m'aider svp?
cdt

[mathieu]

Pour info: le fichier css est volumineux et un peu chargé donc ça m'est impossible de procéder par id ou class ou de cibler toutes les balises de la partie concernée

la 1re idée qui me vient à l'esprit (ce n'est peut être pas la meilleure) est de modifier ce code css pour le limiter à une classe conteneur.
bien sur la solution de faire un copier de la classe conteneur devant chaque sélecteur elle la meilleure façon de faire une erreur et de perdre du temps donc on oublie ça.

il faut donc trouver un moyen de faire ça automatiquement.
si par exemple chaque sélecteur est précédé de 2 retours à la ligne, cela devrait être suffisant pour faire un "rechercher remplacer" dans votre éditeur pour ajouter cette classe.
une autre idée à étudier est d'utiliser un générateur de css comme less par exemple. le principe est d'englober tout le code par la classe du conteneur comme cela :

Code less :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.conteneur_accordeon
{
 
	// ici le contenu du fichier css
 
	.classe1
	{
		...
	}
 
 
	.classe2 .autre
	{
		...
	}
 
}

et ce code une fois compilé va donner ce code css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.conteneur_accordeon .classe1
{
	...
}
 
 
.conteneur_accordeon .classe2 .autre
{
	...
}

regardez là pour les différentes façons d'utiliser less :
https://lesscss.org/