あるタグのセレクターの直後に別のタグが続く


88

これは、すべての選択<B>を直接タグの前<A>タグ:

A+B {
    /* styling */
}

すべてのセレクタは何である<A>直接タグに続くことにより、<B>タグは?

これが私の質問に合うサンプルHTMLです:

<a>some text</a>
<b>some text</b>

3
Peaseは、どのようにA、そしてどのようBに関連しているかというDOMの例を示しています。
ガンボ

2
それらは兄弟であり、Bの後にAが続くという点で関連しています。OPは、の前に直接あるすべてのsを選択できるのと同様に、sbが続くすべてのsを選択したいと考えています。aa+bba
アンソニー

2。5年後、この回答に更新はありますか?また、aに続いてbをターゲットにしようとしています。
chovy 2018

回答:


29

あなたはCSSに入ることができません。

編集:もう少し役立つように、たとえばjQuery(JavaScriptライブラリ)を使用する場合は、を使用できます.prev()


JavaScriptを使用する唯一のソリューションを継ぎ合わせます
Mostafa Farghaly 2009

2
ありがとうジェロエン!それで私の問題は解決しました。私の「A」は左浮遊し、「B」は右浮かぶ、私がでマークアップを入れて発注かは重要ではなかったので。
BobRodes

53

直接内部または後続にB要素がある場合、スタイルAを意味しますか?このような:

<A>
    <B>
    </B>
</A>

// OR

<A>
</A>
<B>
</B>

CSSでは(まだ)そのようなことはできません。Eric Meyerは、この種のセレクターはCSSメーリングリストで何度も議論されており、実行できないと述べています。WebKitのコア開発者の1人であるDaveHyattは、なぜそれができないのかについての良い説明でコメントしています。

チェックアウト:ショーンインマンのブログ投稿エリックマイヤーによるコメント
デビッドハイアットも加重します。


私は2番目のものを意味します、私は問題を理解していますありがとうニック:)
Mostafa Farghaly 2009

17

逆の場合のみ実行できます。これにより、タグの直前にあるすべてのタグが選択されます。

これは論理的にあなたの要求と同等です。

私はよくこれを使用して、ラベル付きの多くのチェックボックスの行のスタイルを設定します

CSS:

label+input {
    margin-left: 4px;
}

DOM:

<input id="a" name="a" type="checkbox"/><label for="a">...</label>
<input id="b" name="b" type="checkbox"/><label for="b">...</label>
<input id="c" name="c" type="checkbox"/><label for="c">...</label>

3
CSSに「input + label」と入力して、左マージンがラベルに適用されるようにするつもりだったと思います。
CAK2

1
@ CAK2-彼はそれが正しいことを意味したと思います。label+inputマージンを実行することにより、2番目のinput要素から始まるすべての要素に適用されます。それはそれらの間にスペースを作成するための創造的な方法ですが、行の最初または最後ではありません。この場合、はと同等input:not(:first-child)です。
デビッド

1

それは非常に便利ではないですが、最近はあなたがHTMLを生成する場合、両方のあなたの要素の順序を逆にすることによって、およびCSSルールを適用することによって、この動作を実現できますdisplay: flexし、flex-direction: column-reverse

ul {
  display: flex;
  flex-direction: column-reverse;
}

.b ~ .a {
  color: red;
}
<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

また、2つ以上のインライン要素がある場合はfloat: right、逆の順序で表示されるため、を適用することで実現できます。

ul {
  float: left;
  list-style-type: none;
}

li {
  float: right;
}

li:not(:first-child) {
  margin-right: 20px;
}

.b ~ .a {
  color: red;
}
<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

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