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

これは簡単なはずですが、検索キーワードを見つけるのに苦労しています。 私がこれを持っているとしましょう： <div class="a c">Foo</div> <div class="b c">Bar</div> CSSでは、「（。aまたは.b）および.c」に一致するセレクターをどのように作成できますか？ 私はこれができると知っています： .a.c,.b.c { /* CSS stuff */ } しかし、私がこの種のロジックをさまざまな論理的な組み合わせで何度も実行する必要があると仮定すると、より良い構文はありますか？

176 html  css  css-selectors 

CSSルールを、クラスの1つが指定されたプレフィックスと一致するすべての要素に適用したい。 たとえばstatus-、次のスニペットでは、（AとCで始まるが、Bではない）クラスを持つdivに適用されるルールが必要です。 <div id='A' class='foo-class status-important bar-class'></div> <div id='B' class='foo-class bar-class'></div> <div id='C' class='foo-class status-low-priority bar-class'></div> ある種の組み合わせ： div[class|=status]とdiv[class~=status-] CSS 2.1で実行できますか？CSS仕様で実行できますか？ 注：私は、jQueryを使用してそれをエミュレートできることを知っています。

175 css  css-selectors 

<div class="commentList"> <article class="comment " id="com21"></article> <article class="comment " id="com20"></article> <article class="comment " id="com19"></article> <div class="something"> hello </div> </div> 選択します#com19か？ .comment { width:470px; border-bottom:1px dotted #f0f0f0; margin-bottom:10px; } .comment:last-child { border-bottom:none; margin-bottom:0; } div.somethingcommentListに実際の最後の子として別の子がある限り、これは機能しません。この場合、最後の子セレクターを使用して最後の外観を選択することはできますarticle.commentか？ jsFiddle

175 html  css  css-selectors 

私がやりたいこと（明らかにIEではない）は： p:not(.list):last-child + :text { margin-bottom: 10px; } これはテキストノードにマージンを与えます。（それは可能ですか？）CSSでテキストノードを取得するにはどうすればよいですか？

173 css  css-selectors 

クラスとIDを同時に選択したいリンクがいくつかあります。 これは、2つの異なる動作があるためです。リンクのクラスが1つのクラス名を取得すると、それらはある方法で動作します。リンクの同じクラスが別のクラス名を取得すると、それらは異なる動作をします。クラス名はjqueryで切り替えられます。 したがって、リンククラスとIDを同時に選択できる必要があります。これは可能ですか？ 私はもう試した： $("a .save #country") 結果なし。

170 jquery  dom  jquery-selectors  css-selectors 

TD行の最初と最後をどのように選択できますか？ tr > td[0], tr > td[-1] { /* styles */ }

170 css  css-selectors 

リストの最後の子を選択できるcssセレクターを探しています。 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <!-- select the pre last item dynamically no matter how long this list is --> <li>6</li> </ul> 静的メソッド： ul li:nth-child(5) 動的な方法： ul li:last-child(-1) もちろんこれは検証しません。また、nth-last-childは動的な方法を提供していないようです。JavaScriptにフォールバックできますが、見落としたcss方法があるかどうか疑問に思っています

161 css  css-selectors 

トリッキーなCSSセレクターの質問です。それが可能かどうかはわかりません。 これがHTMLレイアウトであるとしましょう： <div></div> <div></div> <div></div> <div style="display:none"></div> <div style="display:none"></div> div表示されている最後のを選択したい（つまり、ではないdisplay:none）。これはdiv、与えられた例では3番目になります。div実際のページのs の数は（1でもdisplay:none）異なる場合があります。

161 html  css  css-selectors 

jQueryの最も強力な資産は、DOM内の要素をクエリおよび操作する方法であると何度も聞いたことがあります。CSSクエリを使用して、通常のJavaScriptでは非常に難しい複雑なクエリを作成できます。ただし、私が知る限り、Internet Explorer 8以降でサポートされているdocument.querySelectorまたはでも同じ結果を得ることができますdocument.querySelectorAll。 それで問題はこれです：jQueryの最も強力な資産が純粋なJavaScriptで達成できるのに、なぜjQueryのオーバーヘッドに「リスク」があるのでしょうか？ jQueryには、CSSセレクター以上のものがあることを知っています。たとえば、クロスブラウザーAJAX、素敵なイベントアタッチなどです。しかし、そのクエリ部分は、jQueryの強みの非常に大きな部分です。 何かご意見は？

161 javascript  jquery  html  css-selectors  jquery-selectors 

この文字はCSSファイルで何度も見たことがありますが、どのように使用されているのかわかりません。誰かが私にそれを説明して、ページスタイルを簡単にするのにそれらがどのように役立つかを示すことができますか？

159 css  css-selectors 

親要素にホバーがあるときに子要素のスタイルを変更する方法。可能であれば、これにはCSSソリューションを使用します。：hover CSSセレクターを通じて可能な解決策はありますか？実際に、パネルにホバーがあるとき、パネル内のオプションバーの色を変更する必要があります。 すべての主要なブラウザをサポートしようとしています。

155 css  css-selectors 

ページ上のすべてのhタグをターゲットにしたい。私はあなたがこのようにそれを行うことができることを知っています... h1, h2, h3, h4, h5, h6 { font: 32px/42px trajan-pro-1,trajan-pro-2; } しかし、高度なCSSセレクターを使用してこれを行うより効率的な方法はありますか？例： [att^=h] { font: 32px/42px trajan-pro-1,trajan-pro-2; } （しかし、これは明らかに機能しません）

154 css  css-selectors 

現在、フィールドを無効にするためにreadonly = "readonly"を使用しています。CSSを使用して属性のスタイルを設定しようとしています。私は使ってみました input[readonly] { /*styling info here*/ } しかし、それは何らかの理由で機能していません。私も試しました input[readonly='readonly'] { /*styling info here*/ } それも機能しません。 CSSでreadonly属性のスタイルを設定するにはどうすればよいですか？

150 html  css  css-selectors 

空の入力ボックスにスタイルを適用するにはどうすればよいですか？ユーザーが入力フィールドに何かを入力すると、スタイルは適用されなくなります。これはCSSで可能ですか？私はこれを試しました： input[value=""]

141 css  input  css-selectors 

インラインCSS（つまり、style属性内のCSS ）を使用してHTMLメール署名を作成しています。:beforeおよび:after疑似要素を使用できるかどうかについて知りたいです。 もしそうなら、インラインCSSでこのようなものをどのように実装しますか？ td { text-align: justify; } td:after { content: ""; display: inline-block; width: 100%; }

141 html  css  css-selectors  pseudo-element  inline-styles