隣接する兄弟セレクターを使用して要素を配置する

CSS セレクターの複雑さをナビゲートするのは、特に、要素に基づいてスタイルを設定する必要がある場合には、気が遠くなることがあります。兄弟要素との関係。入力: 隣接兄弟セレクター。CSS 戦略を微調整するために不可欠なツールです。

クラス "hc-reform" の

に続くすべての

タグが clear:both を使用するようにするには、隣接兄弟セレクターを使用できます。記号で示されるこのセレクターは、特定の要素の直後にある兄弟をターゲットとします。

h1.hc-reform   p {
  clear:both;
}

このコード スニペットは、実質的に、クラス「hc-reform」を持つ

の直後に続く

タグのみをターゲットにしています。これらの段落に clear:both を設定すると、

によって導入された可能性のある浮動要素の回り込みを防ぐことができます。

このセレクターは Internet Explorer 6 以前ではサポートされていないことに注意してください。したがって、ユーザーがこれらのブラウザを使用してサイトにアクセスすると予想される場合は、ブラウザの互換性を考慮してください。