1 <div class="mnr-c xpd O9g5cc uUPGi">
2 <div>
3 <div class="mnr-c xpd O9g5cc uUPGi">someting</div>
4 </div>
5 <div>
6 <div class="mnr-c xpd O9g5cc uUPGi">someting</div>
7 </div>
8 </div>
9 <div class="mnr-c xpd O9g5cc uUPGi">someting</div>
10
I have an HTML structure like above. I just want to select child elements using CSS selectors but parents and children have the same classes. If I try to select using jquery for example $$(".mnr-c.xpd.O9g5cc.uUPGi").forEach(el => console.log(el)) that method show 4 result but I just want to see 3 result. Lines 1,9 and 11 are on the same level. My purpose just take lines 3rd and 6th and 9 lines. How I can prevent select a parent element. Is something like this possible just using CSS or jquery?
if all you want is the children, then you can select via child selector >, like this $(".mnr-c.xpd.O9g5cc.uUPGi > .mnr-c.xpd.O9g5cc.uUPGi").
if you want all the descendants of the element with the same class, you can use the descendant combinator (empty space), like this $(".mnr-c.xpd.O9g5cc.uUPGi .mnr-c.xpd.O9g5cc.uUPGi").
CSS doesn't have an option to check contents (based on this answer)
With jquery, you can select the elements that are children, then get their parents and exclude those parents:
var parents = $(".xpd .xpd").parents(".xpd")
var selection = $(".xpd").not(parents)
Note this must be .xpd .xpd and not .xpd > .xpd as there's a div in-between the two levels, so they're not "children"
Giving:
var sel = $(".xpd").not($(".xpd .xpd").parents(".xpd"))
console.log(sel.length)
sel.each((i,e) => console.log(e))<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mnr-c xpd O9g5cc uUPGi">
<div>
<div class="mnr-c xpd O9g5cc uUPGi">something 1</div>
</div>
<div>
<div class="mnr-c xpd O9g5cc uUPGi">something 2</div>
</div>
</div>
<div class="mnr-c xpd O9g5cc uUPGi">something 3</div>Use a descendant combinator:
$(".mnr-c.xpd.O9g5cc.uUPGi .mnr-c.xpd.O9g5cc.uUPGi").forEach(el => console.log(el));
.mnr-c.xpd.O9g5cc.uUPGi .mnr-c.xpd.O9g5cc.uUPGi {
border: 2px dotted red;
}