Untitled

avatar
unknown
plain_text
3 years ago
1.4 kB
9
Indexable
<!DOCTYPE html>
<html>
<head>
	<title>Descendant Selector Example</title>
	<style>
		h1 em {
			color: gray;
		}
		ul ol ul em {
			color: gray;
		}
		blockquote b,
		p b {
			color: gray;
		}
		div:not(.help) span {
			color: gray;
		}
		div.help span {
			color: red;
		}
		.sidebar {
			background: blue;
		}
		main {
			background: white;
		}
		.sidebar a:any-link {
			color: white;
		}
		main a:any-link {
			color: blue;
		}
	</style>
</head>
<body>
	<h1>Welcome to <em>My Website!</em></h1>

	<ul>
		<li>List item 1
			<ol>
				<li>List item 1-1</li>
				<li>List item 1-2</li>
				<li>List item 1-3
					<ol>
						<li>List item 1-3-1</li>
						<li>List item <em>1-3-2</em></li>
						<li>List item 1-3-3</li>
					</ol>
				</li>
				<li>List item 1-4</li>
			</ol>
		</li>
	</ul>

	<blockquote>
		<p>This is a quote with <b>bold text</b>.</p>
	</blockquote>

	<div class="help">
		<div class="aside">
			This text contains <span>a span element</span> within.
		</div>
	</div>

	<div class="sidebar">
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</div>

	<main>
		<section>
			<h1>Welcome to our website!</h1>
			<p>We are a company that specializes in creating amazing websites.</p>
			<button>Learn More</button>
		</section>
	</main>

</body>
</html>
Editor is loading...