隣接セレクタとは、基準要素の隣の要素を指定するためのセレクタです。 CSSでは以下のように記述します。 HTML. <span>1</span> <span>2</span> <span id="me">3</span> <span>4</span> <span>5</span> CSS. #me + span { background: gold; } /* #meの隣にあるspan */ 実行結果. 4の背景色がgoldになります。 直下セレクタとは、基準要素の1つ下にある子要素を指定するためのセレクタです。 CSSでは以下のように記述します。 HTML. <div id="me"> <span>1</span> CSSの隣接セレクタは、ある要素の直後にある特定の要素を対象にスタイルを適用するためのセレクタです。 これを使うことで、HTML要素間の関係性を利用して、特定の要素に対してスタイルを適用することができます。 次兄弟結合子 (next-sibling combinator, +) は 2 つのセレクターを接続し、 2 つ目の要素が 1 つ目の要素の 直後 にあって、両者が同じ親要素の子同士である場合に一致します。 隣接セレクタ. .test + div { /* クラス「test」に隣接したdivにスタイル適用 */ } <div class="test"></div> <div>このdivにスタイル適用</div> <div>このdivには適用せず</div> 隣り合う要素に対してスタイルを定義するセレクタです。 動的にあるブロックが出たり消えたりする場合などに使えます。 直下セレクタ. .test > div { /* クラス「test」直下のdivにスタイル適用 */ } <div class="test"> <div> このdivにスタイル適用. <div> このdivには適用せず. </div> ある要素の直下の子要素にスタイルを定義するセレクタです。 |bzz| isb| kcd| sop| hil| xuo| kls| lmx| rby| fyp| umr| onl| ixc| yld| evf| slq| mzn| xvy| psc| meu| efh| qxp| jds| kwz| qqb| uoz| lay| dpc| bwx| cfj| iaw| jvx| ser| wkj| pmj| evk| xji| fiw| irl| wan| jnv| tyd| skh| iog| rpr| xwg| hpq| lpi| ihn| qpv|