これは、すべての選択<B>
を直接タグの前で<A>
タグ:
A+B {
/* styling */
}
すべてのセレクタは何である<A>
直接タグに続くことにより、<B>
タグは?
これが私の質問に合うサンプルHTMLです:
<a>some text</a>
<b>some text</b>
これは、すべての選択<B>
を直接タグの前で<A>
タグ:
A+B {
/* styling */
}
すべてのセレクタは何である<A>
直接タグに続くことにより、<B>
タグは?
これが私の質問に合うサンプルHTMLです:
<a>some text</a>
<b>some text</b>
b
が続くすべてのsを選択したいと考えています。a
a+b
b
a
回答:
あなたはCSSに入ることができません。
編集:もう少し役立つように、たとえばjQuery(JavaScriptライブラリ)を使用する場合は、を使用できます.prev()
。
直接内部または後続にB要素がある場合、スタイルAを意味しますか?このような:
<A>
<B>
</B>
</A>
// OR
<A>
</A>
<B>
</B>
CSSでは(まだ)そのようなことはできません。Eric Meyerは、この種のセレクターはCSSメーリングリストで何度も議論されており、実行できないと述べています。WebKitのコア開発者の1人であるDaveHyattは、なぜそれができないのかについての良い説明でコメントしています。
チェックアウト:ショーンインマンのブログ投稿とエリックマイヤーによるコメント。
デビッドハイアットも加重します。
逆の場合のみ実行できます。これにより、タグの直前にあるすべてのタグが選択されます。
これは論理的にあなたの要求と同等です。
私はよくこれを使用して、ラベル付きの多くのチェックボックスの行のスタイルを設定します
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>
label+input
マージンを実行することにより、2番目のinput
要素から始まるすべての要素に適用されます。それはそれらの間にスペースを作成するための創造的な方法ですが、行の最初または最後ではありません。この場合、はと同等input:not(:first-child)
です。
それは非常に便利ではないですが、最近はあなたが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>
A
、そしてどのようB
に関連しているかというDOMの例を示しています。