兄弟セレクタ

このエントリーをはてなブックマークに追加

兄弟セレクタはチルダ(~)でつなげることで指定した要素以降に登場する兄弟要素(自身は含まない)のみを指定できるセレクタです。

たとえば次のようなHTMLがあったとします。

<ul>
   <li id="list0">list0</li>
   <li id="list1">list1</li>
   <li id="list2">list2</li>
   <li id="list3">list3</li>
   <li id="list4">list4</li>
</ul>

次のセレクタでは#list2以降のli要素(つまり#list3と#list4)に対してCSSを適応できます。

#list2 ~ li{
	color:red;
}

参考URL

8.3.2. General sibling combinator - W3C

登録日 : 2013年06月29日 最終更新日 : 2013年6月29日

同じカテゴリー(Selector)のエントリー

検索

スポンサードリンク

バージョン

リファレンス