JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<section id="posts">
    <article class="post" id="first-article">
        <h3>Post 1</h3>
        <p id="bob1">Bob Lablah's Law Blog</p>
    </article>
    <article class="post">
        <h3>Post 2</h3>
        <p id="bob2">Bob Lablah's Law Blog</p>
    </article>
</section>
<p id="outside">Another paragraph</p>

JavaScript

// Fine
console.log( document.querySelectorAll("p") );

// OK
var post1 = document.getElementsByClassName("post")[0];
console.log( "expect 2: ", post1.querySelectorAll("p").length );

// Wat?
console.log( "expect 0: ", post1.querySelectorAll("section p").length );

// I don't know how to do that wtfit
try {
    post1.querySelectorAll("> h3");
} catch (e) {
    console.log( e.message );
}

// We fix it in Sizzle by attaching the ID to the selector
console.log( post1.querySelectorAll("#first-article > h3") );