General Sibling Combinator

CSS

http://tympanus.net/codrops/2012/02/21/accordion-with-css3/


と同じようなことをやりたくて見様見真似で 試してたけど、中途半端にしか動かない。


ただ、もしかしてと思ってテストケースを書 いてみたら解決したので、備忘録としてテス トケースを載せておく。

<html>
	<head>
		<title>General Sibling Combinator Test</title>
		<style>
			div {
				border: 1px solid #000;
			}
			p ~ span.t1 {
				color: red;
			}
			p ~ div > span.t2 {
				color: blue;
			}
		</style>
	</head>
	<body>
		
		<p>p.</p>
		
		<span>span.</span>
		
		<!-- これだけ適用。 -->
		<span class="t1">span-t1.</span>
		
		<span class="t2">span-t2.</span>
		
		<div>
			
			<span>span in div.</span>
			
			<!-- これにも p.t1 ~ span.t1 が適用されるんだと勘違い。 -->
			<span class="t1">span-t1 in div.</span>
			
			<!-- 適用される。この例だと p.t1 ~ div span.t2 でも可。 -->
			<span class="t2">span-t2 in div.</span>
			
		</div>

	</body>
</html>

参考リンク http://www.w3.org/TR/css3-selectors/#general-sibling-combinators