CSS Adjacent sibling combinator プロパティ 関数 要素 使い方・書き方 例 CSS サンプル

Adjacent sibling combinator CSS プロパティとは

トピック:隣接する兄弟コンビネータ(+)は2つのセレクタを接続し、同じ親要素の子であり、最初の要素の直後にある2番目の要素を選択することができる CSSセレクタには、複数のシンプルセレクタを含めることができる 単純なセレクタの間には、コンビネータを含めることができる

隣接する兄弟セレクタ

CSSコード:例

    /* Paragraphs that come immediately after any image */
    img + p {
       font-style: bold;
    }

構文

former_element + target_element { style : properties ; }

直前の要素 + 対象の要素 {スタイル要素のプロパティ : プロパティ値; }

実例 コード 1

サンプル コードを試す
  • h1 + p {
  • color: blue;
  • font-size: 18px;
  • }
  • ul.task + p {
  • color: #f0f;
  • text-indent: 30px;
  • }
    トピック:隣接する兄弟セレクタは、指定された 、要素の隣接する兄弟であるすべての要素を選択します。兄弟要素は同じ親要素を持たなければならず、「隣接」は「直後」を意味する

サポートするデスクトップ ブラウザ対応・互換性

PropertyAdjacent sibling combinator プロパティ 値
Adjacent sibling combinatorChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯ 1フルサポート◯ 12フルサポート◯ 1フルサポート◯ 7フルサポートフルサポート

サポートするモバイル ブラウザ対応・互換性

PropertyAdjacent sibling combinator 内容 説明
Adjacent sibling combinatorAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポートフルサポートフルサポートフルサポート◯ 4フルサポートフルサポートフルサポート
CSS Adjacent sibling combinator プロパティ 関数 要素 使い方・書き方 例 CSS サンプル
CSS Adjacent sibling combinator プロパティ | 使い方 | 書き方 | サンプル | セレクタ 値 | 属性 入門 | CSS マニュアル – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery