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

CSSの:rootセレクターとは？使い方と実例をわかりやすく解説

CSSの:rootセレクターは、ドキュメントのルート要素（HTML文書では<html>要素）を対象にスタイルを適用するための擬似クラスです。ページ全体の背景色や基本の文字色など、文書全体に影響するデザインを指定したい場合に活用できます。

基本的な使い方

以下のコードは、:rootセレクターを使ってページ全体の背景を青色にし、文字色を白色に設定する例です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         :root {
            background: blue;
            color: white;
         }
      </style>
   </head>
   <body>
      <h1>見出し</h1>
      <p>これはデモ用のテキストです。</p>
   </body>
</html>

:rootとhtmlセレクターの違い

:rootはhtmlセレクターと似ていますが、重要な違いがあります。:rootは擬似クラスであるため、詳細度（specificity）がhtmlタグセレクターよりも高く設定されます。そのため、同じプロパティが競合した場合、:rootで指定したスタイルが優先されます。

CSSカスタムプロパティとの組み合わせ

実務では、:rootにCSS変数（カスタムプロパティ）を定義して、サイト全体で共通の色やフォントサイズを管理する方法が広く使われています。

:root {
  --main-color: #3498db;
  --font-size-base: 16px;
}

body {
  color: var(--main-color);
  font-size: var(--font-size-base);
}

このように:rootを活用することで、テーマカラーの一括変更やメンテナンス性の向上が期待できます。

  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