[解決済み】アクティブな子の親のための複雑なCSSセレクタ【重複あり
2022-03-26 16:08:27
質問
クラス内の子要素のクラスに基づいて親要素を選択する方法はありますか? の素敵なメニュープラグインによって出力されるHTMLに関連する私に関連する例です。 http://drupal.org . 出力はこのようにレンダリングされます。
<ul class="menu">
<li>
<a class="active">Active Page</a>
</li>
<li>
<a>Some Other Page</a>
</li>
</ul>
質問は、activeクラスのついたアンカーを含むリストアイテムにスタイルを適用することが可能かどうかということです。 明らかに、私はリスト項目がアクティブとしてマークされることを望みますが、私は生成されるコードの制御を持っていないのです。 このようなことは、javascript(JQueryが思い浮かびます)を使用して実行できますが、CSSセレクタを使用してこれを行う方法があるかどうか疑問に思っています。
はっきりさせておきたいのは、アンカーではなく、リスト項目にスタイルを適用したいのです。
どのように解決するのですか?
残念ながら、CSSでそれを行う方法はありません。
JavaScriptではそれほど難しいことではありませんが。
// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;
// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.
関連
-
[解決済み] Ionicカードリスト作成
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] CSSセレクタの"~"(チルダ/スクイグル/ツイドル)はどういう意味ですか?
-
[解決済み] not:first-child セレクタ
-
[解決済み] CSSセレクタの「+」(プラス記号)の意味は何ですか?
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] 特定のテキストを含む要素に対するCSSセレクタはありますか?
-
[解決済み] CSS :not(:last-child):after セレクタ
-
[解決済み】CSSでclassにワイルドカード*を使用する場合
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Text-decoration: noneが機能しない。
-
[解決済み】Google Chromeでレスポンシブメディアクエリが機能しない件
-
[解決済み】divの重なりについて
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] font-face は OpenType 埋め込み許可チェックに失敗しました。パーミッションはインストール可能である必要があります。
-
[解決済み] Bootstrap 3でnavbar-static-topは何をするのですか?
-
[解決済み] JavaFX Labelの文字色を変更する方法
-
[解決済み] 高さと幅はspanには適用されないのですか?
-
[解決済み] Atomエディタで透明な背景を設定する方法は?
-
[解決済み] CSSの親セレクタはありますか?