efeminella · March 11, 2012 07:16
diff --git a/Adjacent sibling combinator b/Adjacent sibling combinator
 /* Matches all <em> elements which are the next sibling of a <strong> element */
 strong + em {
     /* declarations */
 }
diff --git a/Child combinators b/Child combinators
 /* Matches each <section> element that is a direct child of an <article> element */
 article > section {
    /* declarations */
 }
diff --git a/Descendant combinator b/Descendant combinator
 /* Matches all <h1> elements which are descendants of an <article> element */
 article h1{
    /* declarations */
 }
diff --git a/Example b/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>
diff --git a/General sibling combinator b/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 */
	}