18081 sujets

Questions générales et questions de débutants

[résolu] A propos des pseudo-éléments : before et after

Dans le livre de Raphaël à la page 192. Il est indiqué un exemple de pseudo éléments pour faire un cadre avec des bords arrondis :


p#cadre:before {
	content: url(haut.png);
}
p#cadre:after {
	content: url(bas.png);
}


J'ai essayé ce code mais ça ne fonctionne pas...
Dans quel navigateur peut on voir un résultat ?

Une autre question également pourquoi définir une classe comme ceci :


p#cadre


et pas comme celà


.cadre


Quelle est la différence ?

Merci.
Modifié par EricLB (02 Nov 2005 - 21:06)
Administrateur
EricLB a écrit :
J'ai essayé ce code mais ça ne fonctionne pas...
Dans quel navigateur peut on voir un résultat ?

La page précédente : "Non reconnues par Internet Explorer, ces techniques seront employées avec circonspection malgré leurs nombreux avantages..." Smiley smile

PS : IE7 prévoit de supporter ces pseudo-éléments.
Administrateur
EricLB a écrit :

Une autre question également pourquoi définir une classe comme ceci :


p#cadre


et pas comme celà


.cadre


Quelle est la différence ?

Merci.

Houlà, là on retourne au chapitre 3 qui explique la différence entre une classe (.cadre) et un id (#cadre) -> pages 46-48.

L'application est très différente.
Modifié par Raphael (27 Sep 2005 - 18:10)
salut,

Il me semble que Firefox "comprend" les pseudos classes before ou after.
pour la différence entre 

p#cadre

et 

.cadre

la 1er defini l'élément "p" qui a un id egal à "cadre"
le 2eme defini TOUT ce qui a un classe egale à "cadre"

Un identifiant est UNIQUE dans une page, alors que la classe peut etre attribuée a de multiples éléments..
Oups ! Au temps pour moi...

Je voulais dire la différence entre


p#cadre


et

#cadre


pourquoi ajouter le "p" ?
Bonjour EricLB Smiley cligne
EricLB a écrit :

p#cadre

et
#cadre

pourquoi ajouter le "p" ?

La présence d'un élément devant le sélecteur augmente la spécificité de celui-ci.
p#cadre est plus fort que #cadre.
body p#cadre est plus fort que p#cadre.
C'est ce qu'on appelle la cascade.

Prenons le CSS suivant :

#couleur {color: red}

div p {color: blue}

On serait porté à croire que la couleur bleu écrasera la couleur rouge puisqu'elle est déclaré après, mais il n'en est rien. Un simple sélecteur par ID est plus fort qu'un sélecteur constitué de deux éléments.

<div>
	<p id="couleur">Je suis rouge</p>
</div>

Pour écraser #couleur, il faut augmenter la spécificité du sélecteur :

#couleur {color: red}

p#couleur {color: blue}

Qui donnera :

<div>
	<p id="couleur">Je suis bleu</p>
</div>

Pour en savoir plus sur la cascade : Cascade CSS et priorité des sélecteurs
Bonjour Stephan,

Merci pour ces infos ! Smiley smile

C'est un peu plus clair maintenant, je vais lire les infos d'openweb à ce sujet.

En complément de mes questions, j'ai vu aussi dans certains cas :


html>#menu


Quel en est la signification ?
Sujet clos
Aller à