Changer couleur 1ére lettre après un "."

JENCAL a écrit :
En css tu peux tricher, et faire quelque chose du genre :

http://codepen.io/anon/pen/VeaaZX

Oui mais s'il faut mettre des floats sur les paragraphes ça fait cher payer la couleur ! Surtout qu'en plus il faut insérer ces paragraphes pour chaque points.

Dans de cas là autant mettre un span sur les capitales.
Modifié par Olivier C (17 Dec 2015 - 17:31)

c'est clair que ça pue, mais si il veut pas pas toucher au javascript pour le traitement je vois pas d'autre solutions en css

ok merci ! ça confirme un peu ce que je pensais.

J'ai rien contre javascript, mais je suis une bille.

en php il faut que j'intègre ça dans wordpress donc ça se complique

il me reste le first-letter et à la mano pour les "." à l'intèrieur du <p>

Merci pour votre aide

Salut,

JENCAL a écrit :
c'est clair que ça pue, mais si il veut pas pas toucher au javascript pour le traitement je vois pas d'autre solutions en css

+1

On peut le faire en php bien sûr, mais là encore, c'est dégueu (pour la maintenance et par la suite, on ne sait plus qui fait quoi). Tout de même, tout dépend comment cela a été fait. aussi puisque php est aussi un moteur de template par défaut.

@JeanSaisrien :
Pour ce que tu veux faire, le JS est obligatoire si tu veux bénéficier de quelque chose de propre. Le principe est :
- Créer un motif/pattern permettant de catcher/attraper le caractère qui t'intéresse. Il y a une solution annexe et surement plus verbeuse en utilisant indexOf().
- une fois que tu as choppé les caractères, tu les entoures avec un <span class="colorer">
- tu fais une ou plusieurs règle avec un sélecteur, en css pour style ce caractère.
Modifié par niuxe (20 Dec 2015 - 16:23)

Ouais, moi j'avais fais ça avec jQuery pour attraper les majuscules d'un texte, j'avais bien galéré à ce moment là :

// @note Ajout d'un span + class sur les caractères sélectionnés avec filtrage des balises html
// @todo Le parsage des guillemets droits est déconseillé car problématique sur les liens

jQuery.fn.letter = function() {
	$(':header, legend, .h1, .h2, .h3, .h4, .h5, .h6, .addletter').each(function() {
		var string = $(this),
			newString = string.html().replace(/([A-Z«»"]|&amp;)(?![^<>]*>)/gm, '<span class="letter">$1</span>');
		string.html(newString);
	});
};
jQuery('.letter').letter();

Merci à vous !
Je vais essayer la version Jquerry