I want to select a child element select without a parent element

Question


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?

Use the [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) `$(".O9g5cc .O9g5cc")`, [CSS Child vs Descendant selectors](https://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors) — t.niese, Sep 16 '21 at 14:09
Possibly answers your question: https://stackoverflow.com/questions/18189147/selecting-an-element-that-doesnt-have-a-child-with-a-certain-class/53173276 — freedomn-m, Sep 16 '21 at 15:03

score 0 · Answer 1 · edited Sep 16 '21 at 14:18

0

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").

edited Sep 16 '21 at 14:18

isherwood

58,414
16
114
157

answered Sep 16 '21 at 14:13

George Tsiou

1
2
2

1

The HTML the OP shows indicates that those are not the children but the descendants – t.niese Sep 16 '21 at 14:14
Yes, but in his question he also asks about children, so I provided an answer for both cases. This is probably a simplified example of the actual code, for all we know. – George Tsiou Sep 16 '21 at 14:16
Thank you, George, I forgot to write some places lines 1,9,10 and 11 are on the same level. My purpose take lines 3rd and 6th and 9 10 11 lines. Is something like this possible just using CSS or jquery? – omrsfylmz Sep 16 '21 at 14:42
@omrsfylmz please update your question with your requirement / example. Your question states you want 2 results, but your comment above indicates 5. – freedomn-m Sep 16 '21 at 15:02
@freedomn-m I updated it, is it understandable now? – omrsfylmz Sep 16 '21 at 15:19

score 0 · Accepted Answer · answered Sep 16 '21 at 15:38

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>

score -1 · Answer 3 · answered Sep 16 '21 at 14:10

-1

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;
}

Descendant combinator | MDN

answered Sep 16 '21 at 14:10

Richard Deeming

29,830
10
79
151

I want to select a child element select without a parent element

3 Answers3