web-dev-qa-db-fra.com

CSS pour changer la couleur du dernier mot en h1

J'ai un site Web que je développe en utilisant CSS3 et j'ai la balise h1 pour le titre:

<h1>main title</h1>

Maintenant, je veux que le titre soit d'une couleur différente:

<h1>main <span>title</span></h1>

Moi aussi:

h1 {
 color: #ddd;
}
h1 span {
 color: #333;
}

Existe-t-il un moyen non d’utiliser la balise span et de spécifier uniquement en CSS le dernier mot ayant une couleur différente?

htmlcsscss3colors
20
Alexei

Ce n'est pas possible avec du CSS pur. Cependant, vous pouvez utiliser lettering.js pour obtenir un sélecteur ::last-Word. CSS-Tricks a un excellent article sur ceci: CSS-Tricks: Un appel à nth-everything . Vous pouvez alors faire ce qui suit:

h1 {
  color: #f00;
}

/* EDIT: Needs lettering.js. Please read the complete post,
 * before downvoting. Instead vote up. Thank you :)
 */
h1::last-Word {
  color: #00f;
}
18
iblue

"last-word" ne fonctionnera pas sur tous les navigateurs; Par exemple, cela ne fonctionne pas avec Safari. Je n'utiliserais pas la réponse acceptée. Je ne pense pas que ce soit une bonne idée d'importer une bibliothèque entière ou un plugin simplement pour changer le dernier mot d'un seul titre, c'est comme "tuer un bug avec un canon" ... Au lieu de cela, j'utiliserais une seule fonction Javascript, et une classe globale. Quelque chose comme ça:

<h1>This is my awesome <span class="last-Word">title</span></h1>

CSS:

<style>
    .last-Word {font-weight:bold; /* Or whatever you want to do with this element */ }
</style>

Au départ, vous auriez quelque chose comme ceci:

<h1 class="title">This is my awesome title</h1>

Ensuite, vous pourriez initialiser une méthode Javascript pour changer le dernier mot sur $ (document) .ready () =>

<script>
    $(document).ready(function() {
        $('.title').each(function(index, element) {
            var heading = $(element);
            var Word_array, last_Word, first_part;

            Word_array = heading.html().split(/\s+/); // split on spaces
            last_Word = Word_array.pop();             // pop the last Word
            first_part = Word_array.join(' ');        // rejoin the first words together

            heading.html([first_part, ' <span class="last-Word">', last_Word, '</span>'].join(''));
        });
    });
</script>

Bonne chance.

10
javierluz

Non, il n'y en a pas. Seuls ::first-letter et ::first-line existent dans CSS. Tout le reste doit être fait manuellement avec un élément (par exemple, span).

Remarque: Ni ::first-Word ni ::last-Word ne sont planifiés, du moins pas dans les sélecteurs de niveau 4 .

7
0b10011

CSS n'interagit pas vraiment avec le texte de cette manière. il interagit avec des éléments de l'arborescence DOM. Ajouter une étendue autour de Word est la méthode standard (que j'ai déjà vue) pour différencier un texte. Utilisez simplement la balise span, le responsable du code vous en remerciera.

2
Scott M.

Non, il n'y a pas de sélecteur pour des mots spécifiques, voir Sélecteurs Niveau 3: 2. Sélecteurs .

Vous devez utiliser la balise span ou exécuter JavaScript pour convertir chaque mot en une étendue contenant ce mot.

2
Zeta

Prendre la réponse d'iblue mais rendre un peu plus raisonnable.

Utilisez lettering.js avec la configuration suivante:

$(document).ready(function() {
    $('h1').lettering('words');
});

Cela divisera n'importe quelle balise <h1> en quelque chose comme ceci:

<h1>
    <span class="Word1">Highlight</span>
    <span class="Word2">the</span>
    <span class="Word3">last</span>
    <span class="Word4">Word</span>
    <span class="Word5">a</span>
    <span class="Word6">different</span>
    <span class="Word7">color</span>
</h1>

Bien sûr, nous ne pouvons pas simplement cibler .Word7 car ce n'est peut-être pas le dernier, nous pouvons donc utiliser la pseudo-classe CSS :last-child.

h1 {
    color: #333;
}

h1 > span:last-child {
    color: #c09;
}

Maintenant, le dernier mot est d'une couleur différente. Découvrez l'exemple en direct .

La seule chose à laquelle il faut faire attention est support pour :last-child

1
WolfieZero

CSS fonctionne sur les éléments ... mais généralement pas sur le texte ou les données contenues dans un élément. Vous pouvez utiliser Javascript, si vous le souhaitez, pour travailler avec le texte réel à l'intérieur des éléments.

1
summea

Non, il n'y a pas de sélecteur dans CSS qui ferait référence au dernier (ou au premier) mot d'un élément. Il existe des pseudo-éléments pour la première lettre et pour la première ligne, mais les mots doivent être enveloppés dans des conteneurs pour pouvoir être stylés séparément.

1
Jukka K. Korpela

CSS n'a aucune connaissance des mots. La seule chose qui existe est: first-letter et: first-line . Une construction comme Word et un pseudo-élément pour last n'existent pas.

Si vous voulez vraiment avoir une solution de contournement dans un élément, vous devez utiliser javascript pour analyser le dernier mot sorti . Je pense que la façon dont vous allez est la meilleure façon de ne traiter que quelques cas sur la page.

Si vous l'utilisez pour h1, vous ne devriez l'avoir qu'une fois sur la page.

1
Sven Bieder