Héritage sur H2

Je n'arrive pas à modifier la taille de la police de mon h2. A première vue ça ne semble pas bien compliqué. Malheureusement il ne veut pas prendre en compte ma class titrearticle.

<div class="column-center">
<div class="title">
<h2 class="titrearticle">Mon titre</h2</div></div>

La feuille de style

.column-center .title h2 {
			overflow:hidden; height:100%;
			font-size:1.4em;  font-weight: bold; font-family: arial;
			color:#0e1a27; line-height:1.3em; padding:6px 0px 0px 2px;
			}
.titrearticle {font-size:1.8em;	}
			

Le titre est affiché avec la taille 1.4em et non 1.8em. Je ne comprends pas mon erreur.
Ai-je loupé un épisode sur les règles d'héritage ?

Bonsoir !

Je pense que c'est du à une priorité entre sélecteur...

.titrearticle

sera appliqué avant

.column-center .title h2 

J'avais cru voir un article sur Alsa mais je n'arrive pas a remettre la main dessus...
en attendant : http://openweb.eu.org/articles/cascade_css

extrait :

a écrit :

Voici quelques exemples de sélecteurs et de règles CSS classés par ordre croissant de spécificité :

* {...} : 0000 (aucun idenfifiant, aucune classe, aucun élément) ;
p {...} : 0001 (aucun idenfifiant, aucune classe, un élément) ;
blockquote p {...} : 0002 (aucun idenfifiant, aucune classe, deux éléments) ;
.class {...} : 0010 (aucun idenfifiant, une classe, aucun élément) ;
p.class {...} : 0011 (aucun idenfifiant, une classe, un élément) ;
blockquote p.class {...} : 0012 (aucun idenfifiant, une classe, deux éléments) ;
#id {...} : 0100 (un idenfifiant, aucune classe, aucun élément) ;
p#id {...} : 0101 (un idenfifiant, aucune classe, un élément) ;
blockquote p#id {...} : 0102 (un idenfifiant, aucune classe, deux éléments) ;
.class #id {...} : 0110 (un idenfifiant, une classe, aucun élément) ;
.class p#id {...} : 0111 (un idenfifiant, une classe, un élément) ;
blockquote.class p#id {...} : 0112 (un idenfifiant, une classe, deux éléments) ;
<p style="..."> : 1000 (attribut HTML style qui ne sera supplanté que par un style utilisateur normal) ;
<p style="... !important"> : 1000 (attribut HTML style marqué !important qui ne sera supplanté que par un style utilisateur lui-même marqué !important).

Modifié par _laurent (14 Jun 2012 - 17:33)

_laurent a écrit :
Bonsoir !
...
J'avais cru voir un article sur Alsa mais je n'arrive pas a remettre la main dessus...
en attendant : http://openweb.eu.org/articles/cascade_css
...

Tu pensais à celui-là : CSS : Syntaxe de rigueur (et liens associés) ?

C'est bien l'article d'Openweb qui donne la solution.
Dans le cas présent le premier sélecteur a une priorité de 0021. Le deuxième sélecteur a une priorité de 0010, plus faible. Les déclarations du premier bloc sont donc prioritaires.

Au pasage firebug ou l'équivalent sous chrome montrent bien ce qui est appliqué, et ce qui est écrasé, en le traçant. Les règles avec le plus de force viennent en premier, et ensuite chaque règle ayant de moins en moins d'importance, puis les règles héritées.

Dans cet exemple, on voit bien quelle règle prime:


Modifié par kustolovic (15 Jun 2012 - 08:33)

6l20 a écrit :
Tu pensais à celui-là : CSS : Syntaxe de rigueur (et liens associés) ?

Il me dit rien celui la Je l'ai peut être rêvé !

kustolovic a écrit :
Au pasage firebug ou l'équivalent sous chrome montrent bien ce qui est appliqué, et ce qui est écrasé, en le traçant. Les règles avec le plus de force viennent en premier, et ensuite chaque règle ayant de moins en moins d'importance, puis les règles héritées.

J'avais jamais fait le rapprochement tiens ^^' Merci

T'a fermer ta balise </h2> ?
Modifié par JuseN (15 Jun 2012 - 09:22)