JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
<div id="my_div"></div>
</body>

JavaScript

var m_div = d3.select("#my_div");
    var m_svg = m_div.append("svg");

    var g = m_svg.append("g");

    g.append("circle")
        .attr("class", "mYc a101")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 50) 
        .attr("style", "stroke: green; stroke-width: 8; fill: #000000");

    g.append("circle")
        .attr("class", "mYc a101")
        .attr("cx", 300)
        .attr("cy", 100)
        .attr("r", 50) 
        .attr("style", "stroke: green; stroke-width: 8; fill: #000000");

    g.append("circle")
        .attr("class", "mYc two")
        .attr("cx", 100)
        .attr("cy", 300)
        .attr("r", 50) 
        .attr("style", "stroke: blue; stroke-width: 8; fill: #000000");

    g.append("circle")
        .attr("class", "mYc two")
        .attr("cx", 300)
        .attr("cy", 300)
        .attr("r", 50) 
        .attr("style", "stroke: blue; stroke-width: 8; fill: #000000");

// This selects all four circles
d3.selectAll(".mYc").attr("style", "fill:red");

//This properly selects the two ".mYc.one" circles    
d3.selectAll(".mYc.a101").attr("style", "fill:blue");

//This properly selects the two ".mYc.one" circles
d3.selectAll(".mYc").filter(".a101").attr("style", "fill:green");

//This does not properly select the two ".mYc.one" circles
d3.selectAll(".mYc").selectAll(".a101").attr("style", "fill:yellow");