「CSS」first-of-typeで直前の要素の直後の要素を取得するサンプル

2014年6月21日2020年10月13日

構文
直前の要素 + 対象の要素 { スタイルプロパティ }
「+」は2つのセレクターを接続し、同じ親要素の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。
CSSコード

li:first-of-type + li {

color: green;

}

li:first-of-type + li { color: green; }

li:first-of-type + li {
  color: green;
}

htmlコード

<ul>

<li>A001　項目が選択されない</li>

<li>B002 項目が選択されます。</li>

<li>C003　項目が選択されない</li>

<li>D004　項目が選択されない</li>

</ul>

<ul> <li>A001　項目が選択されない</li> <li>B002 項目が選択されます。</li> <li>C003　項目が選択されない</li> <li>D004　項目が選択されない</li> </ul>

<ul>
  <li>A001　項目が選択されない</li>
  <li>B002 項目が選択されます。</li>
  <li>C003　項目が選択されない</li>
  <li>D004　項目が選択されない</li>
</ul>

Posted by arkgame