タグ付けされた質問 「css-selectors」

セレクターは、ドキュメントツリーの要素と照合するパターンです。CSSルールでは、パターンに一致する要素のスタイルを定義するために使用されます。

30
CSS親セレクターはありますか？
<li>アンカー要素の直接の親である要素を選択するにはどうすればよいですか？ 例として、私のCSSは次のようになります。 li < a.active { property: value; } JavaScriptでこれを行う方法は明らかにありますが、CSSレベル2にネイティブに存在する何らかの回避策があることを願っています。 スタイルを設定しようとしているメニューがCMSによって吐き出されているため、アクティブな要素を要素に移動できません<li>... 何か案は？
3176 css  css-selectors 
17
クラスを持つ最初の要素のCSSセレクター
クラス名の要素がたくさんありredますがclass="red"、次のCSSルールを使用して最初の要素を選択できないようです。 .red:first-child { border: 5px solid red; } <p class="red"></p> <div class="red"></div> コードスニペットを実行する結果を非表示スニペットを展開 このセレクターの何が問題になっていますか、またどのように修正すればよいですか？ コメントのおかげで、要素が親の最初の子である必要があることがわかりましたが、これは私の場合とは異なります。私は次の構造を持っていて、コメントで述べられているようにこのルールは失敗します： .home .red:first-child { border: 1px solid red; } <div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div> コードスニペットを実行する結果を非表示スニペットを展開 クラスで最初の子をターゲットにするにはどうすればよいredですか？
947 css  css-selectors 
9
not：first-childセレクタ
私が持っているdivいくつか含むタグulタグを。 最初のulタグにのみCSSプロパティを設定できます： div ul:first-child { background-color: #900; } ただし、ul最初のタグを除いて、他の各タグのCSSプロパティを設定しようとする次の試みは機能しません。 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で「最初の要素を除く各要素」を記述するにはどうすればよいですか？
811 css  css-selectors 
5
：not（）疑似クラスは複数の引数を持つことができますか？
私が選択しようとしているinputすべての要素typeを除い秒radioとcheckbox。 多くの人があなたがに複数の引数を置くことができることを示しました:not、しかし、typeとにかくそれを使うことはうまくいかないようです私はそれを試みます。 form input:not([type="radio"], [type="checkbox"]) { /* css here */ } 何か案は？
746 css  css-selectors 
4
クラスのCSSのワイルドカード*
私がスタイリングしているこれらのdiv .tocolorがありますが、一意の識別子1、2、3、4なども必要なので、別のクラスとして追加しtocolor-1ます。 <div class="tocolor tocolor-1"> tocolor 1 </div> <div class="tocolor tocolor-2"> tocolor 2 </div> <div class="tocolor tocolor-3"> tocolor 3 </div> <div class="tocolor tocolor-4"> tocolor 4 </div> .tocolor{ background: red; } クラスを1つだけにする方法はありtocolor-*ますか。*このCSSのようにワイルドカードを使用しようとしましたが、機能しませんでした。 .tocolor-*{ background: red; }
10
特定のクラスまたは属性を持たない要素を選択するCSSセレクターを記述できますか？
特定のクラスを持たないすべての要素を選択するCSSセレクタールールを記述したいと思います。たとえば、次のHTMLがあるとします。 <html class="printable"> <body class="printable"> <h1 class="printable">Example</h1> <nav> <!-- Some menu links... --> </nav> <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a> <p class="printable"> This page is super interresting and you should print it! </p> </body> </html> 「印刷可能」クラスを持たないすべての要素を選択するセレクターを記述したいと思います。この場合、navとa要素です。 これは可能ですか？ 注：これを使用したい実際のHTMLでは、「印刷可能」クラスを持たない要素が多くなります（上記の例ではその逆です）。
645 html  css  css-selectors 
3
ブラウザーがCSSセレクターを右から左に一致させるのはなぜですか？
CSSセレクターは、ブラウザーエンジンによって右から左にマッチングされます。したがって、まず子供を見つけ、次に親をチェックして、ルールの残りの部分と一致するかどうかを確認します。 どうしてこれなの？ それは仕様が言っているからというだけですか？ 左から右に評価した場合、最終的なレイアウトに影響しますか？ 私にとって最も簡単な方法は、要素数が最も少ないセレクターを使用することです。したがって、最初にIDを使用します（1つの要素のみを返す必要があるため）。次に、おそらくノードまたはノードの数が最も少ないクラスまたは要素です。たとえば、ページにスパンが1つしかない場合があるため、スパンを参照するルールを使用してそのノードに直接移動します。 ここに私の主張を裏付けるいくつかのリンクがあります http://code.google.com/speed/page-speed/docs/rendering.html https://developer.mozilla.org/en/Writing_Efficient_CSS 親でなければならない子のすべての親ではなく、親の子（多くの場合）をすべて見る必要がないように、このように行われているようです。DOMが深い場合でも、RTLマッチングでは複数のノードではなく、レベルごとに1つのノードのみを参照します。CSSセレクターLTRまたはRTLを評価する方が簡単/高速ですか？
1
2つのクラスを持つ要素に適用されるCSSセレクター
2つの特定のクラスに設定されているクラス属性の値に基づいてCSSで要素を選択する方法はありますか？たとえば、3つのdivがあるとします。 <div class="foo">Hello Foo</div> <div class="foo bar">Hello World</div> <div class="bar">Hello Bar</div> fooとbarクラスの両方のメンバーであるという事実に基づいて、リストの2番目の要素のみを選択するためにどのCSSを記述できますか？
472 css  css-selectors 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.