Untitled
unknown
plain_text
2 years ago
1.4 kB
1
Indexable
Never
<!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>