English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
General sibling selector, no need to be adjacent, just in the same level, A~B selector all elements B at the same level after element A.
Complete CSS Selector Reference Manual
Set the font color for each span element after the p element in the same parent element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>/title>
<style>
p ~ span {
color: red;
}
</style>
</head>
<body>
<span>This is not red.</span>/span>
<p>Here is a paragraph.</p>/p>
<code>Here is some code.</code>/code>
<span>And here is a span.</span>/span>
</body>
</html>Test to see ‹/›former_element ~ target_element { style properties }element1~element2 The selector matches the appearance of the element1 the element after2.
element1 and element2 These two elements must have the same parent element, but element2 It is not necessary to be immediately following element1 after the element.
IEFirefoxOperaChromeSafari
All major browsers support element1~element2 Selector.
Note:To use this selector in IE8 This selector must be declared in versions earlier than <!DOCTYPE>.