別の要素の後に最初に出現する要素を選択します

113

ページに次の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セレクターで可能ですか？はいの場合、どうすればよいですか？

html css css-selectors

— ロブ
ソース

199

#many .more.selectors h4 + p { ... }

これは隣接兄弟セレクターと呼ばれます。

— フロッグス
ソース

1

別の方法は、JSを使用してh4要素を見つけ、次の兄弟に移動して、それにCSSクラスを追加することです。jQueryの場合、これは単純に$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz

2

これは最初の要素の直後の要素でのみ機能することに注意してください。2番目に次のhtml要素が必要な場合は、次のように連鎖させることができます。#selector .original + h4 + p .original要素に続くh4に続くpを取得します。非常に

— 便利

30

リテラルの例では、隣接するセレクター（+）を使用します。

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

ただし、連続するすべての段落を選択する場合は、一般的な兄弟セレクター（〜）を使用する必要があります。

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

残念ながらIE 7以降ではバグがあることが知られています。

— ジョエル・メロン
ソース

16

このタイプのことを自分で解決しようとするとき、ちょうどこれにぶつかってください。

私はp以外の何かの後で要素を扱うセレクターをしました。

.here .is.the #selector h4 + * {...}

これがそれを見つけた人に役立つことを願っています:)

— トム
ソース

9

*タイトルで説明されているように、使用は任意の要素と一致します。私にとって役立つリマインダーでした。

— James EJ

1

これが質問に当てはまる唯一の答えです。他の回答には、先行する要素のタイプに関する事前の知識が必要です。

— Hugo Wijdeveld 2018

0

初心者のために単に努力する：

別の要素の直後に要素を選択する場合は、+セレクターを使用します。

例えば：

div + p「+」要素<p>は、<div>要素の直後に配置されるすべての要素を選択します

セレクタについて詳しく知りたい場合は、これを使用してください表をください

— Trooller
ソース

0

最新のCSSを使用していて、「+」が機能しなかったので、

：第一子

— VNicholson
ソース