兄弟セレクタ
兄弟セレクタはチルダ(~)でつなげることで指定した要素以降に登場する兄弟要素(自身は含まない)のみを指定できるセレクタです。
たとえば次のような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)のエントリー
- 兄弟セレクタ
- 隣接セレクタ
- 子セレクタ
- :not()
- idセレクタ
- classセレクタ
- ::after
- ::before
- ::first-letter
- ::first-line
- :indeterminate
- :checked
- :disabled
- :enabled
- :lang()
- :target
- :focus
- :active
- :hover
- :visited
- :link
- :empty
- :only-of-type
- :only-child
- :last-of-type
- :first-of-type
- :last-child
- :first-child
- :nth-last-of-type()
- :nth-of-type()
- :nth-last-child()
- :nth-child()
- :root
- 属性セレクタ
- 子孫セレクタ
- 要素セレクタ
- ユニーバサルセレクタ