18043 sujets

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

Changer la couleur des premières lettres d'un texte

Bonjour à tous !
Je souhaiterais savoir s'il est possible de changer la couleur des premières lettres d'un texte juste avec un css ?
Alors ????? Smiley eek Smiley langue
Bonjour,
Pour la première lettre, je crois qu'il existe une pseudo-classe first-letter. IE n'est pas compatible.

Sinon, tu as la solution un peu moins élégante d'utiliser un span et une classe ...
QuentinC a écrit :
Bonjour,
Pour la première lettre, je crois qu'il existe une pseudo-classe first-letter. IE n'est pas compatible.

Sinon, tu as la solution un peu moins élégante d'utiliser un span et une classe ...

Je connais first-letter et je souhaite biensûr me passer d'une balise span...
Smiley bawling
Modérateur
Bonjour

Tu peux faire ceci :

HTML

<p><span>Le</span> premier mot sera en rouge.</p>


CSS

p span {
color:red;
}


Sinon, s'il s'agit de la première lettre seulement, tu peux regarder les pseudo-elements CSS.

Edit : Grillé par QuentinC ! Smiley kc
Modifié par Tony Monast (16 Jun 2006 - 16:51)
Modérateur
Comme l'une ou l'autre des solutions ne t'intéressent, est-ce qu'une pincée de Javascript t'intéresserais ? Il y a surement moyen de le faire via Javascript.
Modifié par Tony Monast (16 Jun 2006 - 16:53)
QuentinC a écrit :
IE n'est pas compatible.


Si si, IE supporte :first-letter (depuis la version 5.5 je crois)
En revanche, il faut passer un espace entre "first-letter" et l'accolade ouvrante, sinon aucun effet.
Modifié par Alan (16 Jun 2006 - 17:31)
a écrit :
En revanche, il faut passer un espace entre "first-letter" et l'accolade ouvrante, sinon aucun effet.

C'est vrai que ça aurai eté tellement simple que ça marche normalement...............merci IE
a écrit :

En revanche, il faut passer un espace entre "first-letter" et l'accolade ouvrante, sinon aucun effet.

C'est encore plus pervers comme dysfonctionnement que si ça ne marchait carrément pas ...
Pour être plus précis, il faut un espace après first-letter puisque si celui-ci est collé à une virgule, ça n'a pas non plus d'effet.
Ce qui est marrant c'est qu'il n'y a ce problème qu'en mode standard et non en quirks mode...
Modifié par Alan (16 Jun 2006 - 20:42)
On peut aussi s'amuser en mettant un first-letter sur un élément qui n'existe pas :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>IE mon amour</title>
		<style type="text/css">

			#jExistePas a:first-letter {
				color: green;
			}
			#main a {
				display: block;
				text-decoration: none;
			}
			#main a:hover {
				color: red;
				font-size: 2em;
				font-weight: bold;
				text-decoration: underline;
			}

		</style>
	</head>
	<body>
		<div id="main">
			<a href="pouet">Lorem ipsum etc.</a>
		</div>
	</body>
</html>

Si vous testez sous IE6, vous verrez que tout à coup, les propriétés du a:hover ne s'appliqueront que sur la premier lettre du a Smiley confus
Oui c'est pas mal,
il y a déjà eu un cas comme ça ici : Mise en page IE...je pige plus!
La moitié de la page ne s'affichait pas à cause d'un first-letter sur un élémént qui n'était pas sur la page.

Sinon mettre une couleur à li:first-letter va colorier non seulement la la première lettre... mais également la puce (ou la numérotation).

Je crois qu'il y avait même un truc avec first-letter qui faisait carrément planter IE6 sous SP1
Modifié par Alan (17 Jun 2006 - 10:54)
Sujet clos
Aller à