CSS疑似クラス：： not（）および：ターゲット

この記事では、多用途のCSS疑似クラス

および:not()を探り、洗練されたターゲットスタイルを作成する際の力を示しています。 それらの機能を掘り下げ、JavaScriptのないタブの構築を含む実用的なアプリケーションを実証します。 :target

重要な概念：

シンボルの後の部分）。これにより、JavaScriptなしでインタラクティブな要素を作成できます :not() JavaScript-Less Tabs URLフラグメントを巧みに操作することにより、

pseudoクラスを操作することで、JavaScriptに依存せずに機能的なタブ付きインターフェイスを構築できます。 タブをクリックすると、URLフラグメントが更新され、対応するタブコンテンツの:targetスタイルがトリガーされ、可視層になります。 #

：

で要素を除外します :targetのパワーは、スタイルルールから要素を除外する能力にあります。 ただし、単一の引数のみを受け入れるという現在の制限には、複数の除外をチェーンする必要があります。 たとえば、

ラジオボタン、チェックボックス、および範囲入力を除くすべての入力要素を選択します。 将来のCSS仕様は、機能の改善を約束し、

。 :target :target

ティファニーB.ブラウンの「CSSマスター」からの抜粋。書店で、および電子ブックとして利用できます このセクションでは、子どもがインデックスした型と型付けされた子供にインデックスされた擬似クラス（ドキュメントツリー内の位置ごとに要素を選択）や入力擬似クラス（値と状態に基づいてフォームフィールドをターゲットにする）を含む、高度な擬似クラスを調査します。 :not()

ページフラグメントの強調表示：

:not() input:not([type=radio]):not([type=checkbox]):not([type=range])フラグメント識別子（例えば、:not()、

）がページのナビゲーションに使用されます。

pseudo-classは、JavaScriptなしで現在のフラグメント識別子と一致するセクションをスタイリングできます。 たとえば、

このスタイルは、IDがURLフラグメントと一致するときに黄色の背景でコメントをスタイリングします。

CSSのみのタブの作成：

:target状態に基づいてz-index値を設定することにより、選択したタブのみが表示されるようにします。 :target

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

<div class="tabbed-widget">
  <div class="tab-wrap">
    <a href="https://www.php.cn/link/7426f79c9a7f5af0a6cc457b2a7fb195">Tab 1</a>
    <a href="https://www.php.cn/link/60430f4a984aa0a534e027339a7580a7">Tab 2</a>
    <a href="https://www.php.cn/link/9d4f684ba088d28ad1c2ae7d0aee496a">Tab 3</a>
  </div>
  <ul class="tab-body">
    <li id="tab1"><p>This is tab 1.</p></li>
    <li id="tab2"><p>This is tab 2.</p></li>
    <li id="tab3"><p>This is tab 3.</p></li>
  </ul>
</div>

アクセシビリティのヒント：

アクセシビリティを改善するには、javaScriptを使用して属性を管理していることを検討してください。 aria-hidden

アクション：

:not()クラスを持つものを除き、スタイリングフォームラベルによって実証されています。

:not()label-radio 以下に示すように、複数の要素タイプを除外する場合、

チェーン

[id^=tab] { position: absolute; }
[id^=tab]:first-child { z-index: 1; }
[id^=tab]:target { z-index: 2; }

は重要です。

これは、ラジオ、チェックボックス、範囲を除くすべての入力タイプを効率的にターゲットにしています

:not()

selector：

label:not(.label-radio) {
  font-weight: bold;
  display: block;
}

on faqs このセクションでは、さまざまなCSSセレクターを使用した機能、ブラウザーのサポート、および使用法をカバーするセレクターに関する一般的な質問への回答を提供します。 答えは元のテキストのものに似ていますが、明確さと簡潔さのために言い換えられます。

以上がCSS疑似クラス：： not（）および：ターゲットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。