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

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

7
:nth-​​child()または:nth-​​of-type()を任意のセレクターと組み合わせることができますか?
任意のセレクターに一致する(または一致しない) n番目ごとの子を選択する方法はありますか?たとえば、奇数のテーブル行をすべて選択しますが、行のサブセット内にあります。 table.myClass tr.row:nth-child(odd) { ... } <table class="myClass"> <tr> <td>Row <tr class="row"> <!-- I want this --> <td>Row <tr class="row"> <td>Row <tr class="row"> <!-- And this --> <td>Row </table> しかし、:nth-child()ちょうどすべてカウントするように思えるtr私は1つで終わるので、関係なく、彼らは「行」クラスのしているかどうかの要素をも、「行」の要素の代わりに、私が探している2。同じことがでも起こり:nth-of-type()ます。 誰かが理由を説明できますか?
116 css  css-selectors 

3
同じ要素に対して複数の:before疑似要素を持つことはできますか?
:before同じ要素に複数の疑似を持つことは可能ですか? .circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; } 上記のスタイルをjQueryを使用して同じ要素に適用しようとしていますが、最新のスタイルのみが適用され、両方が適用されることはありません。


5
別の要素の後に最初に出現する要素を選択します
ページに次のHTMLコードがあります。 <h4>Some text</h4> <p> Some more text! </p> 私.cssでは、h4要素をスタイルする次のセレクターを持っています。上記のHTMLコードは、コード全体のほんの一部です。divシャドーボックスに属するラップされたいくつかのs があります: #sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4 { color : #614E43; margin-top : 5px; margin-left : 6px; } だから、私のh4要素には正しいスタイルがありますpが、HTMLでタグのスタイルも設定したいと思います。 これはCSSセレクターで可能ですか?はいの場合、どうすればよいですか?
113 html  css  css-selectors 

4
CSSのマウスダウンセレクターとは何ですか?
ボタンやその他の要素にはデフォルトのスタイルがあり、3つのステップで動作することに気づきました:通常のビュー、ホバー/フォーカスビュー、マウスダウン/クリックビュー、CSSでは通常のビューとホバービューのスタイルを次のように変更できます: button{ background:#333; color:#FFF; } button:hover{ background:#000; color:#EEE; } しかし、どうすればマウスダウンを選択できますか?私はこのようなものが欲しい: button:mousedown{ //some styling } ありがとう
113 html  css  css-selectors 

8
CSS「and」および「or」
いくつかの入力タイプのスタイリングから分析する必要があるので、私はかなり大きな問題を抱えています。私は次のようなものを持っていました: .registration_form_right input:not([type="radio") { //Nah. } しかし、私もチェックボックスのスタイルを設定したくありません。 私はもう試した: .registration_form_right input:not([type="radio" && type="checkbox"]) .registration_form_right input:not([type="radio" && "checkbox"]) .registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"]) 使い方は&&?||もうすぐ使う必要があり、使い方は同じだと思います。 アップデート: 私はまだ使用する方法がわからない||と&&、正しく。W3ドキュメントに何も見つかりませんでした。

5
LESSの即時子セレクター
とにかく、LESSの出力に直接の子セレクター(>)を適用させる方法はありますか? 私のスタイルでは、以下のようなものを書きたいです: .panel { ... > .control { ... } } そしてLESSに次のようなものを生成させます: .panel > .control { ... }
112 css  css-selectors  less 


5
ターゲット位置:現在「スタック」状態にあるスティッキー要素
位置:スティッキーは一部のモバイルブラウザーで機能するようになりました。メニューバーをページと共にスクロールさせ、ユーザーがスクロールすると常にビューポートの上部に固定することができます。 しかし、現在「固定」されているときに、固定メニューバーを少しだけスタイル変更したい場合はどうでしょうか。たとえば、ページと一緒にスクロールするときはいつでもバーの角を丸くしたいかもしれませんが、バーがビューポートの上部にくっついたらすぐに、上部の丸い角を取り除き、その下に小さなドロップシャドウを追加しますそれ。 現在固着::stuckしている要素をターゲットにするための何らかの種類の疑似セレクター(など)はposition: sticky ありますか?または、ブラウザーベンダーはパイプラインでこのようなものを持っていますか?そうでない場合、どこでリクエストすればよいですか? NB。モバイルでは通常scroll、ユーザーが指を離したときにイベントが1つしか取得されないため、JavaScriptソリューションは適していません。そのため、JSはスクロールのしきい値を超えた正確な瞬間を知ることができません。

6
疑似要素に単一または二重のコロン表記を使用する必要がありますか?
IE7とIE8は疑似要素(::afterまたは::first-letter)のダブルコロン表記をサポートしていないため、また、最近のブラウザー:afterは後方互換性のためにシングルコロン表記(たとえば)をサポートしているため、シングルコロン表記のみを使用する必要があります。 IE8の市場シェアがごくわずかなレベルまで下がって、コードベースを見つけて置き換えますか?または両方を含める必要があります: .foo:after, .foo::after { /*styles*/ } IE8ユーザー(貧しい人々)のことを気にすると、doubleだけを使用するのはばかげているように見えます。

4
CSS3:チェックされていない疑似クラス
公式のCSS3 :checked疑似クラスがあることは知っていますが、:unchecked疑似クラスはありますか?それらは同じブラウザーをサポートしていますか? Sitepointのリファレンスでは言及されていませんが、このwhatwg仕様(それが何であれ)は言及しています。 :checkedと:not()疑似クラスを組み合わせると同じ結果が得られることはわかっていますが、私はまだ興味があります。 input[type="checkbox"]:not(:checked) { /* styles */ } 編集: w3cは同じ手法を推奨します チェックされていないチェックボックスは、否定疑似クラスを使用して選択できます。 :not(:checked)

11
最後の子セレクターの使用
私の目標は、CSSを最後に適用するliことですが、そうではありません。 #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5; } <div id="refundReasonMenu"> <ul id="nav"> <li><a id="abc" href="#">abcde</a></li> <li><a id="def" href="#">xyz</a></li> </ul> </div> コードスニペットを実行する結果を非表示スニペットを展開 最後の子だけを選択するにはどうすればよいですか?
106 css  css-selectors 

4
<input type =“?”のCSSセレクター
CSSを使用して、タイプに基づいてすべての入力をターゲットにする方法はありますか?さまざまな無効なフォーム要素で使用する無効なクラスがあり、テキストボックスの背景色を設定していますが、チェックボックスでその色を取得したくありません。 別のクラスでこれを実行できることはわかっていますが、可能であればCSSを使用します。きっとJavaScriptでこれを設定できますが、再びCSSを探します。 IE7 +をターゲットにしています。だから私はCSS3を使うことができないと思います。 編集する CSS3を使用すると、次のようなことができますか? INPUT[type='text']:disabled それは私のクラスを完全に取り除くのにさらに良いでしょう... 編集する 助けてくれてありがとう!したがって、クラスを設定する必要なしに無効にされたすべてのテキストボックスと領域を変更するセレクターがあります。この質問を始めたとき、これが可能だとは思っていませんでした... INPUT[disabled][type='text'], TEXTAREA[disabled] { background-color: Silver; } これはIE7で動作します

2
最初の子と最後の子以外のCSSセレクター
非常に高度なウェブサイトを作成しています。私の質問::first-childおよびを除く他のすべての子を選択することは可能:last-childですか?私は:not()セレクターがあることを知っていますが、括弧内にないセレクターでは機能しません。これは私が持っているものです: #navigation ul li:not(:first-child, :last-child) { background: url(images/UISegmentBarButtonmiddle@2x.png); background-size: contain; }
105 html  css  css-selectors 


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.