web-dev-qa-db-ja.com

h1の最後の単語の色を変更するためのCSS

CSS3を使用して開発しているWebサイトがあり、h1タイトルのタグ：

<h1>main title</h1>

今、私はタイトルを別の色にしたいです：

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

私もです：

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

notspanタグを使用し、CSSで最後のWordのみを異なる色に指定する方法はありますか？

htmlcsscss3colors
21
Alexei

これは純粋なCSSでは不可能です。ただし、lettering.jsを使用して::last-Wordセレクター。 CSS-Tricksには、これに関する優れた記事があります。 CSS-Tricks：nth-​​everythingの呼び出し 。その後、次のことができます。

h1 {
  color: #f00;
}

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

「最後の単語」はすべてのブラウザで機能するわけではありません。たとえば、Safariでは機能しません。私は受け入れられた答えを使いません。単一のタイトルの最後のWordを変更するためだけにライブラリまたはプラグイン全体をインポートするのは良い考えではないと思います。「大砲でバグを殺す」ようなものです...代わりに、単一のJavascript関数を使用し、グローバルクラス。このようなもの：

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

最初は、次のようなものがあります。

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

次に、Javascriptメソッドを初期化して、$（document）.ready（）の最後のWordを変更できます=>

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

幸運を。

10
javierluz

いいえ、ありません。 CSSには::first-letterと::first-lineのみが存在します。それ以外の要素は、要素を使用して手動で行う必要があります（例：span）。

注：::first-Wordも::last-Wordも、（ セレクターレベル4仕様 。

7
0b10011

Iblueの答えを取りますが、もう少し賢明にします。

次の設定で lettering.js を使用します。

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

これにより、<h1>タグが次のように分割されます。

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

もちろん、.Word7をターゲットにすることはできません。これは最後ではない可能性があるため、:last-child CSS擬似クラスを使用できます。

h1 {
    color: #333;
}

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

これで、最後のWordは別の色になりました。 実際の例をご覧ください 。

注意が必要なのは :last-childのサポート だけです

2
WolfieZero

CSSは実際にはそのような方法でテキストと対話しません。 DOMツリーの要素とやり取りします。そのWordの周りにスパンを追加することは、テキストの一部を区別するための標準的な方法です（少なくとも私が見てきた方法です）。 spanタグを使用するだけで、コードの管理者から感謝されます。

2
Scott M.

いいえ。特定の単語にセレクタはありません。 セレクタレベル3：2.セレクタ を参照してください。

spanタグを使用するか、JavaScriptを実行して、すべてのWordをそのWordを含むスパンに変換する必要があります。

2
Zeta

CSSは要素に対して機能しますが、通常は要素内のテキストやデータに対しては機能しません。ただし、Javascriptを使用して、要素内の実際のテキストを操作することもできます。

1
summea

いいえ、CSSには、要素の最後の（または最初の）単語を参照するセレクターはありません。最初の文字と最初の行には擬似要素がありますが、個別にスタイルを設定するには、単語をコンテナにラップする必要があります。

1
Jukka K. Korpela

CSSには単語に関する知識がありません。存在する唯一のものは：first-letterと：first-lineです。 Wordのような構造とlastの擬似要素は存在しません。

1つの要素内で回避策を実際に使用する場合は、javascriptを使用して最後のWordを解析する必要があります。ページにいくつかのケースしかない場合は、あなたのやり方が最良の方法だと思います。

H1に使用する場合は、ページ上で1回だけ使用する必要があります。

1
Sven Bieder