efeminella/Adjacent sibling combinator

## Adjacent sibling combinator
/* Matches all <em> elements which are the next sibling of a <strong> element */
strong + em {
    /* declarations */
}

## Child combinators
/* Matches each <section> element that is a direct child of an <article> element */
article > section {
    /* declarations */
}

## Descendant combinator
/* Matches all <h1> elements which are descendants of an <article> element */
article h1{
    /* declarations */
}

## Example
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>CSS3 Combinators</title>
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<style type="text/css">
		    /* General styles; not pertinent to the examples below */
			body, article, section, header {
				font-family: Arial, Helvetica, sans-serif;
				color: #000;
				background-color: #fff;
			}
			article, section, header {
				display: block;
			}

			/* Descendant combinator
			   Matches all <h1> elements which are descendants of an <article> element */
			article h1{
			    background-color: red;
			    color: white;
			}
			/* Child combinators
			   Matches each <section> element that is a direct child of an <article>
			   element, and, changes their background color to green with white text */
			article > section {
			    background-color: green;
			    color: white;
			}
			/* Adjacent sibling combinator
			   Matches all <em> elements which immediately follow (are the next sibling of)
			   a <strong> element */
			strong + em {
				color: blue;
			}
			/* General sibling combinator
			   Matches all <time> elements which are preceded by a <del> element */
			del ~ time {
			    background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<article>
				<header>
					<h1>I am Red</h1>
					<h2>I have no styles</h2>
				</header>
				<section>
					<header>
						<h1>I am also Red</h1>
					</header>
					<p>My container was set to <del>Green</del> <strong>on the</strong> <time datetime="2011-11-11">November 11<sup>th</sup></time>.</p>
					<section>
						<header>
							<h1>And I am Red, too</h1>
						</header>
						<p>This container is White, <strong>and</strong>, <em>this text is Blue</em></p>
					</section>
				</section>
			</article>
		</div>
	</body>
</html>

## General sibling combinator
/* Matches all <time> elements which are preceded by a <del> element */
del ~ time {
    /* declarations */
}
	/* Matches all <em> elements which are the next sibling of a <strong> element */
	strong + em {
	/* declarations */
	}
	/* Matches each <section> element that is a direct child of an <article> element */
	article > section {
	/* declarations */
	}
	/* Matches all <h1> elements which are descendants of an <article> element */
	article h1{
	/* declarations */
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>CSS3 Combinators</title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style type="text/css">
	/* General styles; not pertinent to the examples below */
	body, article, section, header {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #fff;
	}
	article, section, header {
	display: block;
	}

	/* Descendant combinator
	Matches all <h1> elements which are descendants of an <article> element */
	article h1{
	background-color: red;
	color: white;
	}
	/* Child combinators
	Matches each <section> element that is a direct child of an <article>
	element, and, changes their background color to green with white text */
	article > section {
	background-color: green;
	color: white;
	}
	/* Adjacent sibling combinator
	Matches all <em> elements which immediately follow (are the next sibling of)
	a <strong> element */
	strong + em {
	color: blue;
	}
	/* General sibling combinator
	Matches all <time> elements which are preceded by a <del> element */
	del ~ time {
	background-color: red;
	}
	</style>
	</head>
	<body>
	<div>
	<article>
	<header>
	<h1>I am Red</h1>
	<h2>I have no styles</h2>
	</header>
	<section>
	<header>
	<h1>I am also Red</h1>
	</header>
	<p>My container was set to <del>Green</del> <strong>on the</strong> <time datetime="2011-11-11">November 11<sup>th</sup></time>.</p>
	<section>
	<header>
	<h1>And I am Red, too</h1>
	</header>
	<p>This container is White, <strong>and</strong>, <em>this text is Blue</em></p>
	</section>
	</section>
	</article>
	</div>
	</body>
	</html>
	/* Matches all <time> elements which are preceded by a <del> element */
	del ~ time {
	/* declarations */
	}