[解決済み] not:first-child セレクタ
2022-03-21 22:03:29
質問
私は
div
タグには、複数の
ul
タグを使用します。
に対してCSSプロパティを設定することができました。
ul
タグのみです。
div ul:first-child {
background-color: #900;
}
しかし、私の以下の試みは、互いにCSSプロパティを設定するものです。
ul
タグを除いて、うまくいきません。
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
CSSで、"各要素、最初のものを除く"と書くにはどうしたらよいでしょうか。
どのように解決するのですか?
投稿されたバージョンの1つ 実際に動作する は、すべてのモダンブラウザで使用できます。 CSS セレクタレベル3 は 対応 ):
div ul:not(:first-child) {
background-color: #900;
}
レガシーブラウザに対応する必要がある場合、あるいは
:not
セレクタの
制限
(を受け入れるだけです。
単純セレクタ
を引数として使用する場合は、別のテクニックを使用することができます。
意図するものより大きな範囲を持つルールを定義し、それを条件付きで取り消し、その範囲を意図するものに限定します。
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
スコープを限定する場合は デフォルト値 は、設定する各CSS属性に対応しています。
関連
-
[CSSチュートリアル】resizeで画像のプレビューを切り替える方法
-
[CSSチュートリアル】ネイティブCSSでテキストの無制限回転を実現する汎用的な方法
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] 前の兄弟」セレクタはありますか?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] CSSセレクタの"~"(チルダ/スクイグル/ツイドル)はどういう意味ですか?
-
[解決済み] CSSは常にJavascriptより優先されるべきか?
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] 子要素の余白が親要素を移動させる
-
[解決済み】最初の直接の子だけを対象としたCSSセレクタはありますか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[css3]css3は、3つの方法のサンプルコードのテキストの点滅効果を達成するために
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[CSSチュートリアル】タイトルを上部に配置するスティッキーレイアウトを実現するためのCSS
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について