JSFiddle - React, Tailwind, and code Playground

by thesystemrestart

HTML

<!--
<div class="a">First div<span> >> child 1</span></div>
<div class="a">second div</div>
<div class="a">third div<span> >> child 3</span></div>
<div class="a">fourth div</div>
-->

<!--<div class="a">First div<span>child 1</span></div>
<div class="a">second div</div>
<div class="a">third div<span>child 3</span></div>
<div class="a">fourth div</div>-->

<div id="parent">
    <div>First div<span> >> child 1</span></div>
    <div>second div</div>
    <div>third div<span> >> child 3</span></div>
    <div>fourth div</div>
    <div>different div</div>
</div>

CSS

div {
    padding: 5px;
    margin: 5px;
    border: 1px dashed #ddd;
}

JavaScript

//$('.a').not(':last').css('background', 'red');
//$('.a').not(':has(span)').css('color', 'green');
/*$('.a').not(':has(span)').on('click', function() {
    alert('I have to child span');
});*/

$('#parent').find('div').not(':has(span), .b').hover(function() {
    $(this).css('background', '#ccc');
}, function() {
    $(this).css('background', 'transparent');
});