qompile
Version:
Compile HTML plus dynamic styles and convert to HTML and CSS
102 lines (93 loc) • 2.15 kB
HTML
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Element Query Explorations</title>
<h1>Element Query Explorations for static (non-dynamic) HTML</h1>
<h2>Character count in text content</h2>
<section class=headline>
<h2>MMMMM</h2>
<h2>MMMMMMMMMM</h2>
<h2>MMMMMMMMMMMMMMM</h2>
<h2>MMMMMMMMMMMMMMMMMMMM</h2>
</section>
<h2>String match in text content</h2>
<section class=string>
<ul>
<li>to laugh is the best medicine</li>
<li>laughter is the best medicine</li>
<li>slaughter is the best medicine</li>
</ul>
</section>
<h2>Regex match in text content</h2>
<section class=regex>
<ul>
<li>to laugh is the best medicine</li>
<li>laughter is the best medicine</li>
<li>slaughter is the best medicine</li>
</ul>
</section>
<h2>Parent Selector (like <code>:has()</code>)</h2>
<section class=parent>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul>
<li>item 1</li>
<li class=target>target</li>
<li>item 3</li>
</ul>
</section>
<h2>Ancestor Selector</h2>
<section class=ancestor>
<ul class=goal>
<li>item</li>
<li>item
<ul>
<li>item</li>
<li class=target>target</li>
<li>item</li>
</ul>
</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item
<ul class=goal>
<li>item</li>
<li class=target>target</li>
<li>item</li>
</ul>
</li>
<li>item</li>
</ul>
</section>
<h2>Previous Sibling Selector</h2>
<section class=previous>
<ul>
<li>item</li>
<li class=target>target</li>
<li>item</li>
</ul>
</section>
<h2>First of Selector in Document</h2>
<section class=first>
<p>Lorem ipsum <span>dolor</span> sit amet, consectetur <span>adipisicing</span> elit, sed do eiusmod tempor <span>incididunt</span> ut labore et dolore magna aliqua.</p>
</section>
<h2>Number of Children</h2>
<section class=children>
<ul>
<li>item 1</li>
</ul>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</section>