CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:langセレクターとは？lang属性ごとにスタイルを適用する方法

CSSの:langセレクターは、要素に設定されたlang属性の値に基づいてスタイルを適用できる擬似クラスです。多言語対応のWebサイトでは、言語ごとにフォントや表記スタイルを変えたいケースが多く、そんなときにこのセレクターが非常に役立ちます。

:langセレクターの基本構文

基本的な書き方は以下のとおりです。括弧内に対象となる言語コード（例：fr、en、ja など）を指定します。

要素:lang(言語コード) {
  /* 適用したいスタイル */
}

実装例

次のコードでは、lang="fr"（フランス語）が指定された<p>要素のみに背景色を適用しています。実際にブラウザで実行して動作を確認してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:lang(fr) {
        background: green;
      }
    </style>
  </head>
  <body>
    <p>This is my country</p>
    <p lang="fr">C'est mon pays</p>
    <p>French is the language of France</p>
  </body>
</html>

実行結果のポイント

  • 1つ目と3つ目の段落にはlang属性がないため、背景色は適用されません。
  • 2つ目の段落にはlang="fr"が指定されているため、緑色の背景が表示されます。

:langセレクターの活用シーン

:langセレクターは、日本語・英語・フランス語など複数の言語が混在するページで、言語ごとにフォントファミリーや行間、引用符のスタイルを切り替えたい場合に特に便利です。また、ハイフネーション（自動的な単語の改行処理）も言語設定に依存するため、各要素に適切なlang属性を設定しておくことで、より自然で読みやすいテキスト表示を実現できます。

  1. CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法

    CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*

  2. CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説

    CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white