Il est facile de cibler la première lettre d’un mot avec le CSS mais il n’existe pas de sélecteur CSS pour cela! Jquery arrive à la rescousse !
Importer la librairie Jquery
Pour cela il faut ajouter dans le header.php :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
Ou se rendre sur cette adresse pour télécharger la librairie pour intégrer aux assets si vous le souhaitez : https://releases.jquery.com/
Cibler le premier mot et mettre une classe CSS
Ensuite on peut placer son script :
<script>
$(document).ready(function(){
$('h1').each(function() { /*De mon côté je veux sélectionner les titres de niveau 1*/
var word = $(this).html();
var index = word.indexOf(' ');
if(index == -1) {
index = word.length;
}
$(this).html('<span class="first-word">' + word.substring(0, index) + '</span>' + word.substring(index, word.length)); /*Je veux placer un span avec une class css first-word pour mettre du style*/
});
});
</script>
Ensuite on place le CSS de son choix ! Directement dans le header ou dans une feuille de style :
<style>
.first-word{
color:red;
}
</style>