28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
J'aurais une petite question concernant l'écriture de mon css.

Dans mon document, j'ai une classe (.titre)
Elle possède un fond bleu et une hauteur de lettre de 12px.

J'aimerais maintenant que cette classe (.titre), si elle se retrouve dans un div nommé (.article) change seulement de couleur de fond. Mais qu'elle garde sa couleur pour le reste de mon document.

Est-ce possible ou dois-je créer une nouvelle classe ?
Si c'est possible, comment dois-je l'écrire ?




???????????????????
.titre.article{ 
background-color: red;
}



Merci d'avance pour vos réponses.
Modifié par Natas (21 Jan 2009 - 16:10)
Bah en testant un peu toutes les possibilités, j'ai fini par trouver Smiley smile
Je l'écris ici pour ceux qui aimeraient connaître la réponse.


.titre{
background-color: blue;
font-size: 12px;
}

.titre div.article{  (attention: ne marche pas sous IE6)
background-color: red;
}







Désolé pour le double post.
++
Modifié par Natas (21 Jan 2009 - 16:32)
C'est tout à fait possible :

.article .titre


EDIT : Un titre est un élement HN (h1, h2, ..., h6), il ne faut pas utiliser une div que l'on stylisera comme un titre !
Modifié par Yasashii (21 Jan 2009 - 16:12)
Effectivement ça marche aussi Yasashii, merci.

J'avais oublié l'espace entre la première et la seconde classe.

Donc les 2 façons sont possibles:


.article .titre{ xxx }
.article div.titre{ xxx } (attention ne marche pas sous IE6)


Merci encore ++
Modifié par Natas (21 Jan 2009 - 16:32)
ok, merci pour l'info Yasashii, j'avais testé avec FF3 et IE7 seulement.


PS: je vais éditer mes autres posts et l'indiquer.

++
Salut Nathas,

le point le plus important de cette conversation est que
Yasashii a écrit :
Un titre est un élement HN (h1, h2, ..., h6), il ne faut pas utiliser une div que l'on stylisera comme un titre !
Pour dire ça autrement : chaque balise doit être utilisée à bon escient. Voir cet article sur openweb : Respecter la sémantique XHTML.

Pour aller plus loin dans l'utilisation des sélecteurs voici quelques liens (parmi d'autres) :
Comprendre l'héritage et la parenté des styles CSS (Alsa).
Cascade CSS et priorité des sélecteurs (Openweb).
la syntaxe des sélecteurs (floatthatbox.com).


Yasashii a écrit :
Ta façon ne fonctionne pas (du moins pas sous IE6).
Tu ne confondrais pas avec ce problème d'IE6 résumé dans ce post ? Smiley cligne
Modifié par Heyoan (21 Jan 2009 - 17:22)