it-swarm.com.de

CSS zum Ändern der Farbe des letzten Wortes in h1

Ich habe eine Website, die ich mit CSS3 entwickle, und ich habe h1-Tag für den Titel:

<h1>main title</h1>

Jetzt möchte ich, dass der Titel in einer anderen Farbe erscheint:

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

So ich mache:

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

Gibt es einen Weg nicht , um den Tag span zu verwenden und nur das letzte Word in CSS mit einer anderen Farbe anzugeben?

20
Alexei

Dies ist mit reinem CSS nicht möglich. Sie können jedoch lettering.js verwenden, um einen ::last-Word-Selektor zu erhalten. CSS-Tricks hat dazu einen hervorragenden Artikel: CSS-Tricks: Ein Aufruf für nth-everything . Sie können dann Folgendes tun:

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" funktioniert nicht in jedem Browser. Zum Beispiel funktioniert es nicht mit Safari. Ich würde die akzeptierte Antwort nicht verwenden. Ich denke nicht, dass es eine gute Idee ist, eine gesamte Bibliothek oder ein Plugin zu importieren, um nur das letzte Wort eines einzelnen Titels zu ändern. Es ist wie "einen Fehler mit einer Kanone töten" eine globale Klasse. Etwas wie das:

<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>

Anfangs hätten Sie so etwas wie:

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

Dann könnten Sie eine Javascript-Methode initialisieren, um das letzte Wort in $ (document) .ready () => zu ändern

<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>

Viel Glück.

10
javierluz

Nein, da ist kein. In CSS sind nur ::first-letter und ::first-line vorhanden. Alles andere muss manuell mit einem Element durchgeführt werden (z. B. span).

Hinweis: Weder ::first-Word noch ::last-Word sind geplant, zumindest nicht in der Auswahlstufe 4-Ebene .

7
0b10011

CSS interagiert auf diese Weise nicht wirklich mit Text. Es interagiert mit Elementen im DOM-Baum. Das Hinzufügen eines Abschnitts um dieses Wort ist die Standardmethode (zumindest habe ich gesehen), um einen Text zu unterscheiden. Verwenden Sie einfach das span-Tag. Der Betreuer des Codes wird es Ihnen danken.

2
Scott M.

Nein. Es gibt keinen Wähler für bestimmte Wörter, siehe Auswahlstufen Stufe 3: 2. Auswahlmöglichkeiten .

Sie müssen den Tag span verwenden oder JavaScript ausführen, um jedes Word in einen Bereich umzuwandeln, der dieses Word enthält.

2
Zeta

Die Antwort von iblue nehmen, aber ein bisschen vernünftiger werden.

Verwenden Sie lettering.js mit der folgenden Einstellung:

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

Das wird jeden <h1>-Tag in so etwas aufteilen:

<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>

Natürlich können wir .Word7 nicht nur als Ziel festlegen, da dies möglicherweise nicht das letzte ist. Daher können wir die :last-child CSS-Pseudoklasse verwenden.

h1 {
    color: #333;
}

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

Nun hat das letzte Wort eine andere Farbe. Schauen Sie sich das Live-Beispiel an .

Das einzige, worauf Sie achten sollten, ist Unterstützung für :last-child

1
WolfieZero

CSS arbeitet mit Elementen ... aber im Allgemeinen nicht mit dem Text oder den Daten in einem Element. Sie können jedoch auch Javascript verwenden, um mit dem eigentlichen Text in den Elementen zu arbeiten.

1
summea

Nein, es gibt keinen Selektor in CSS, der sich auf das letzte (oder erste) Word eines Elements bezieht. Es gibt Pseudo-Elemente für den ersten Buchstaben und für die erste Zeile. Wörter müssen jedoch in Containern eingeschlossen werden, um sie separat zu formatieren.

1

CSS hat keine Kenntnisse über Wörter. Das einzige, was existiert, ist: der erste Buchstabe und: die erste Zeile. Ein Konstrukt wie ein Word und ein Pseudoelement für das letzte sind nicht vorhanden.

Wenn Sie wirklich eine Problemumgehung innerhalb eines Elements haben möchten, müssen Sie Javascript verwenden, um das letzte Wort zu analysieren. Ich denke, die Art, wie Sie gehen, ist der beste Weg, wenn Sie nur wenige Fälle auf der Seite haben.

Wenn Sie es für h1 verwenden, sollten Sie es nur einmal auf der Seite haben.

1
Sven Bieder