Typography & Interaction

			<!doctype html>
<html>
	<head>
		<title>More pseudo-classes</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<div>
			<p>This should be blue.</p>
			<p>Standard black, here.</p>
			<p>Also black.</p>
			<p>This one is purple!</p>
			<p>Back to black.</p>
			<p>This will be fuchsia.</p>
		</div>
		<div>
			<p>This should be red.</p>
		</div>
	</body>
</html>

index.html

			/* The paragraph is the first descendent of its parent. */
p:first-child { color: blue; }

/* Paragraphs that are the 4th children. */
p:nth-child(4) { color: purple; }

/* Last one. */
p:last-child { color: fuchsia; }

/* Only one. */
p:only-child { color: red; }

/* You can invert these, too. */
div:not(:first-child) { background-color: lightgray; }

style.css