[Résolu] Attribution d'une classe non prise en compte

Bonjour

Mon code initial:

<article id="post-14" role="article">
		<header>
			<h1>
			<a href="lien"</a></h1>
			<p></p>
		</header>

a {
color: #2175bd;
text-decoration: none;
}

a:hover {
color: #db2020;
text-decoration: none;
}

article h1,
article h1 a {
	margin: 0;
	color: #444;
	font-weight: bold;
	line-height: 1.1;	
}

Lorsqu'il y le survol de la souris, les titres se mettent en rouge.
J'ai voulu créer une class post pour distinguer les articles "news" des articles "pages".

Mon nouveau code:

<article id="post-14" class="post" role="article">
		<header>
			<h1>
			<a href="lien"</a></h1>
			<p></p>
		</header>

.post h1,
.post h1 a {
	margin: 0;
	color: #444;
	font-weight: bold;
	line-height: 1.1;

Là au survol de la souris, plus de changement de couleur.
je ne vois pas l'erreur si ce n'est d'avoir remplacé article par .post

Et comme je voulais attribuer des class ou des id à ces balises html5, j'ai peur que dans mon css il y ait d'autres propriétés qui ne soient pas prises en compte suite à cztte erreur de syntaxe.

Merci

Hello,

C'est une histoire de poids (spécificité) de tes sélecteurs.

En effet, "a:hover" a moins de poids que ".post h1 a" et c'est donc ce dernier qui l'emporte quel que soit l'ordre.

La meilleure méthode est d'éviter de cibler avec autant d'intermédiaire : il est souvent bien plus pratique de cibler avec ".post a" que ".post h1 a"... et en plus ça devrait fonctionner.

Voici 2 articles pour comprendre :
- http://openweb.eu.org/articles/cascade_css
- http://blog.goetter.fr/post/33490356170/une-si-mauvaise-id

Merci de cette réponse qui m'aura poussé à me documenter sur cette partie des css (poids des sélecteurs) que j'avais négligée (et pourtant j'ai tes deux livres!!).

Voilà ma correction:

.post h1 {
	margin: 0;
	color: #444;
	font-weight: bold;
	line-height: 1.1;	
}
.post a {
	color: #444;
}
.post a:hover {
	color: #db2020;
}

Ca fonctionne, mais pour cela j'ai du rajouter:

}
.post a:hover {
	color: #db2020;
}

Alors que c'est une règle qui est déjà fixée pour tous les liens.

Modifié par cpalo (07 Jul 2013 - 11:43)

Parce que quand tu fais :

.post a {
	color: #444;
}

Tu écrases la couleur du lien pour tous ses états (hover y compris).

Tu as 4 états pour les liens : a:link, a:hover, a:active, a:visited. "a" tout court remplace les 4 états. Tu aurais pu faire :

.post a:link, post a:active, post a:visited {
	color: #444;
}

Et tu aurais gardé la couleur par défaut du :hover que tu as déclarée précédemment.
Modifié par jb_gfx (07 Jul 2013 - 13:11)

Merci

Bonne fin de soirée