is セレクターと where セレクターをマスターする: 動的でインタラクティブな CSS レイアウトを作成する-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

is セレクターと where セレクターをマスターする: 動的でインタラクティブな CSS レイアウトを作成する

PHPz

Sep 08, 2023 pm 04:55 PM

セレクターですここでセレクターCSSレイアウト

is セレクターと where セレクターをマスターする: 動的でインタラクティブな CSS レイアウトを作成する

is セレクターと where セレクターに精通している: 動的でインタラクティブな CSS レイアウトを作成する

CSS はフロントエンド開発に不可欠な部分であり、Web ページを提供できます。デザイン効果。その中でも、セレクターは CSS の中核の 1 つであり、ページ上の要素を選択してスタイルを設定するのに役立ちます。この記事では、よく使用される 2 つの CSS セレクター、is と where を紹介します。これらを柔軟に使用することで、より動的でインタラクティブな CSS レイアウトを作成できます。

1. is セレクター

is セレクターは、CSS レベル 4 で導入された新しいセレクターです。要素の属性一致に基づいて特定の要素を選択できます。 is セレクターは、コンマで区切られた 1 つ以上のセレクターを引数として受け取ります。例:

nav.is-active,
.header.is-active {
  background-color: #ff0000;
  color: #ffffff;
}

上記のコードでは、セレクター nav.is-active および .header.is-active は、クラス is-active の nav 要素および .header 要素の選択を表します。これらの要素を選択すると、背景色が赤、フォント色が白など、対応するスタイルが適用されます。

is セレクターを使用すると、さまざまな属性値に基づいて要素を選択し、動的なスタイル切り替え効果を実現できます。たとえば、ナビゲーションバーでは、現在選択されているナビゲーション項目に基づいて is-active クラスを追加し、is セレクターを使用してさまざまなナビゲーション項目にさまざまなスタイルを追加し、現在選択されている項目を強調表示できます。

2. Where セレクター

where セレクターも CSS レベル 4 で導入された新しいセレクターであり、CSS の論理演算と同様に、指定されたセレクター条件に基づいて要素を選択できます。例:

div:where(.is-active) {
  background-color: #ff0000;
  color: #ffffff;
}

上記のコードでは、セレクター div:where(.is-active) は、クラス is-active の div 要素を選択することを意味します。要素が選択されると、背景色が赤、フォント色が白など、対応するスタイルが適用されます。

where セレクターを使用すると、最初の子要素の選択や最後の子要素の選択、ドキュメントフロー内の要素の位置に基づく選択など、特定の条件で要素をより柔軟に選択できます。 . .このようにして、要素の位置とステータスに応じて対応するスタイルを設定し、より動的でインタラクティブなレイアウト効果を実現できます。

3. サンプルアプリケーション

次の簡単な例は、is セレクターと where セレクターを使用して動的でインタラクティブな CSS レイアウトを作成する方法を示しています。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div:where(.is-active) {
        background-color: #ff0000;
        color: #ffffff;
      }
      
      nav.is-active,
      .header.is-active {
        background-color: #ff0000;
        color: #ffffff;
      }
      
      .nav-item:hover {
        background-color: #0000ff;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="is-active">Div 1</div>
    <div>Div 2</div>
    
    <nav class="is-active">Nav 1</nav>
    <nav>Nav 2</nav>
    
    <div class="header is-active">Header 1</div>
    <div class="header">Header 2</div>
    
    <ul class="nav-list">
      <li class="nav-item">Item 1</li>
      <li class="nav-item">Item 2</li>
      <li class="nav-item">Item 3</li>
    </ul>
  </body>
</html>

上記のコードを見ると、クラス名が is-active の要素が選択されているとき、その要素の上にマウスを置くと背景色とフォントの色が赤に変わることがわかります。クラス名 nav- item 要素がオンの場合、背景色と文字色が青色になります。

この例では、要素のステータスと属性に基づいて特定のスタイルを要素に追加し、動的でインタラクティブな CSS レイアウト効果を実現する方法を示します。

概要:

is セレクターと where セレクターを使用すると、要素をより柔軟に選択してスタイル設定できるため、より動的でインタラクティブな CSS レイアウトを作成できます。これらの導入により、フロントエンド開発の選択肢と可能性が広がり、さまざまな設計ニーズやユーザーインタラクションエクスペリエンスにより適切に対応できるようになります。 is セレクターと where セレクターの使用法と例の詳細については、関連ドキュメントとチュートリアルを参照してアプリケーションスキルを習得し、ページのデザインとレイアウトに創造性とハイライトを追加できます。

以上がis セレクターと where セレクターをマスターする: 動的でインタラクティブな CSS レイアウトを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。