Une classe en css pour la page en cours...

Bonjour,

J'avance pas mal sur mon apprentissage Site en DIV...

Je voulais rajouter un petit "décors" niveau Menu, mais apparemment ça reste sans effet...

Comme dans mon sujet précédent placé dans la section HTML, j'ai utilisé un gabarit Elephorm/Alsacréation : https://fvsch.com/gabarits-html/html/modele07.html

.current {
	color: #cbd888;
	}

J'ai voulu rajouter le code ci-dessus dans mon CSS, juste pour changer la couleur du texte sur la page en cour, mais le texte ne change pas...
Le code de base du Gabarit reste prioritaire et je ne sais pas pourquoi...

Le menu :

		<ul>
				<li><a href="javascript:void(0);" class="current">Accueil</a></li>
				<li><a href="Site/Radio_1.html">Radio</a></li>
				<li><a href="Site/Article_Presse.html">Article Presse</a></li>
				<li><a href="Site/Captures_pdf.html">Captures PDF</a></li>
				<li><a href="Site/Legislation.html">Législation</a></li>
				<li><a href="Site/Affiches.html">Affiches</a></li>
				<li><a href="Site/Video.html">Video</a></li>
				<li><a href="Site/Credits.html">Crédits</a></li>
		</ul>

Je reprend une image postée dans l'autre sujet :



Merci d'avance
Modifié par Jason (07 Sep 2018 - 16:55)

Problème de sélecteurs prioritaires dans le CSS, ou de cache sur le navigateur (rafraichir avec CTRL+F5).

Je vois que les liens sont rouges d'origine donc je penche plutôt sur une erreur de priorité. Tu dois avoir un sélécteur plus précis lorsque tu définis la couleur rouge du style "ul > li > a" donc ça passe au dessus de la classe seule ".current". Si tu veux éviter ce problème, utilise la même sélection, par exemple "ul > li > .current".

Bonjour @Nolan
Merci
Pas de problème avec le cache, il est vidé automatiquement à la fermeture du navigateur...
...et le rafraichissement complet ne change rien.

Le CSS d'origine pour cette partie, c'est :

/* Navigation */
#navigation {
	background: #181A12; /* -> 2 */
}
#navigation a {
	color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
}

J'ai essayé sans succès avec :

/* Menu page en cours */
.current {
	color: #cbd888;
	}

/* Menu page en cours */
.current a {
	color: #cbd888;
	}

/* Menu page en cours */
#current a {
	color: #cbd888;
	}

Bonsoir @Olivier C

Ben, c'est à dire que, je ne savais pas qu'on pouvait placer ainsi une CLASS après une ID...

L'idée ne m'était pas venu

Bon, ceci dit, mes plus sincères remerciements, parce que ça marche...




Juste un dernier point sans rapport direct avec l'exemple au-dessus.
Doit-on écrire dans l'exemple ci-dessous:
div .annonce
ou
div.annonce (sans espace)

div .annonce iframe {
	border: 0;
	margin: 0;
}

C'est là toute la subtilité :
- avec espace ça veut dire que la classe ".annonce" est dans un élément enfant de la div ciblée en premier :

<div>
    <div class="annonce"></div>
</div>

- sans espace veut dire que la classe est dans la div :

<div class="annonce"></div>

Pour ce dernier cas on peut éventuellement l'omettre pour ne mettre que la classe :

.annonce {}

@Olivier C
J'avais vu passer des pages sur les éléments enfant, mais mal expliquées...
Beaucoup plus clair dans cette explication... Merci !

Et donc pour finir dans mon cas, si c'est la Balise iframe qui doit recevoir la CLASS, c'est donc mal placé dans mon exemple CSS...
Modifié par Jason (07 Sep 2018 - 22:16)