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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7488
15
1377
52
77
11
19
40
フロントエンドの面接官からよく聞かれる質問
Mar 19, 2024 pm 02:24 PM
フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメイン リクエスト、フロントエンド エンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。
CSS レイアウト単位の進化と応用: ピクセルからルート要素のフォント サイズに基づく相対単位へ
Jan 05, 2024 pm 05:41 PM
px から rem へ: CSS レイアウト ユニットの進化と応用 はじめに: フロントエンド開発では、多くの場合 CSS を使用してページ レイアウトを実装する必要があります。過去数年にわたって、CSS レイアウト ユニットは進化し、発展してきました。最初は要素のサイズと位置を設定する単位としてピクセル (px) を使用しました。しかし、レスポンシブ デザインの台頭とモバイル デバイスの普及により、ピクセル ユニットにはいくつかの問題が徐々に明らかになってきました。これらの問題を解決するために、新しい単位 rem が登場し、CSS レイアウトで徐々に広く使用されるようになりました。 1つ
CSS レイアウトのヒント: 円形グリッド アイコン レイアウトを実装するためのベスト プラクティス
Oct 20, 2023 am 10:46 AM
CSS レイアウトのヒント: 円形グリッド アイコン レイアウトを実装するためのベスト プラクティス グリッド レイアウトは、最新の Web デザインにおける一般的で強力なレイアウト手法です。円形のグリッド アイコン レイアウトは、よりユニークで興味深いデザインの選択です。この記事では、円形グリッド アイコン レイアウトの実装に役立ついくつかのベスト プラクティスと具体的なコード例を紹介します。 HTML 構造 まず、コンテナ要素を設定し、このコンテナにアイコンを配置する必要があります。順序なしリスト (<ul>) をコンテナとして使用でき、リスト項目 (<l
純粋な CSS を使用してウォーターフォール フロー レイアウトを実装する方法とテクニック
Oct 20, 2023 pm 06:01 PM
純粋な CSS を使用してウォーターフォール フロー レイアウトを実装する方法とテクニック。ウォーターフォール レイアウト (ウォーターフォール レイアウト) は、Web デザインで一般的なレイアウト方法です。コンテンツを高さの異なる複数の列に配置して画像を形成します。ウォーターフォールのような視覚効果です。このレイアウトは、写真表示や商品表示など、大量のコンテンツを表示する必要がある場面でよく使用され、ユーザーエクスペリエンスが優れています。ウォーターフォール レイアウトを実装するにはさまざまな方法があり、JavaScript または CSS を使用して実行できます。
レスポンシブな画像レイアウトを実装する CSS Positions レイアウト メソッド
Sep 26, 2023 pm 01:37 PM
レスポンシブな画像レイアウトを実装するための CSSPositions レイアウト メソッド 現代の Web 開発では、レスポンシブ デザインは必須のスキルとなっています。レスポンシブ デザインでは、画像のレイアウトは重要な考慮事項の 1 つです。この記事では、CSSPositions レイアウトを使用してレスポンシブ画像レイアウトを実装する方法を紹介し、具体的なコード例を示します。 CSSPositions は、必要に応じて要素を Web ページ内に任意に配置できるようにする CSS のレイアウト方法です。レスポンシブ画像レイアウトでは、
CSS レイアウト チュートリアル: 聖杯レイアウトを実装する最良の方法
Oct 19, 2023 am 10:19 AM
CSS レイアウト チュートリアル: 聖杯レイアウトを実装する最良の方法、コード例付き はじめに: Web 開発において、レイアウトは非常に重要な部分です。優れたレイアウトにより、Web ページがより読みやすくアクセスしやすくなります。その中でもHoly Grailレイアウトは非常に古典的なレイアウト方法であり、コンテンツを中央に配置し、エレガントな表示効果を維持しながら適応性を実現します。この記事では、聖杯レイアウトを実装する最適な方法と具体的なコード例を紹介します。 1. 聖杯レイアウトとは何ですか? Holy Grail レイアウトは、一般的な 3 列レイアウトです。
CSS レイアウトのヒント: 積み重ねられたカード効果を実装するためのベスト プラクティス
Oct 22, 2023 am 08:19 AM
CSS レイアウトのヒント: 積み重ねられたカード効果を実現するためのベスト プラクティス 最新の Web デザインでは、カード レイアウトは非常に人気のあるデザイン トレンドになっています。カード レイアウトは情報を効果的に表示し、優れたユーザー エクスペリエンスを提供し、レスポンシブ デザインを促進します。この記事では、積み重ねられたカード効果を実現するための最良の CSS レイアウト テクニックのいくつかを、具体的なコード例とともに共有します。 Flexbox を使用したレイアウト Flexbox は、CSS3 で導入された強力なレイアウト モデルです。カードを重ねる効果を簡単に実現できます
CSS レイアウト チュートリアル: 2 列のレスポンシブ レイアウトを実装する最良の方法
Oct 18, 2023 am 11:04 AM
CSS レイアウト チュートリアル: 2 列レスポンシブ レイアウトを実装する最良の方法 はじめに: Web デザインにおいて、レスポンシブ レイアウトは、ユーザーのデバイスの画面サイズと解像度に応じて Web ページが自動的にレイアウトを調整できるようにする非常に重要なテクノロジであり、より優れたパフォーマンスを提供します。ユーザー体験。このチュートリアルでは、CSS を使用して単純な 2 列のレスポンシブ レイアウトを実装する方法を示し、具体的なコード例を示します。 1. HTML 構造: まず、以下に示すような基本的な HTML 構造を作成する必要があります: <!DOCTYPEht
