This question already has answers here:
How to Select Element That Does Not have Specific Class
(6 answers)
Closed 8 months ago.
Example -
<div class="main"></div>
<div class="main child"></div>
On chrome devtools document.querySelectorAll(".main") selects main & main child.
How can I select only main?
Use .main:not(.child) to select only those elements that have the main class but not the child class.
console.log(document.querySelectorAll('.main:not(.child)'))
<div class="main"></div>
<div class="main child"></div>
Read more about :not() on MDN
Related
This question already has answers here:
Get next / previous element using JavaScript?
(10 answers)
Is there a way to select sibling nodes?
(16 answers)
Closed 2 years ago.
If I have this HTML:
<div class="elem">
<div class="child"></div>
</div>
<div class="sibling">
</div>
and the JS
let elem = document.querySelector('.elem');
Using elem.querySelector(":scope ~ div") does not return anything even though there are div siblings of elem.
Using elem.querySelector(":scope > div") returns an element because also there are are div children of elem.
How could I select the current sibling of elem?
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I have a number of DIVs on the page with class="row". I need a selector for one that had a child div with id="test".
<div class="row">
<div class="col col-12">
<div id="test">
This is a test
</div>
</div>
</div>
How do I select that particular row?
div.row div#test
did not work for me.
I tried accessing it using
$('div.row div#test ').show();
but nothing happened.
$('div.row').has('div#test').show()
With $('div.row') you get the row's divs. The method 'has('div#test')` applies a filter on these elements but still returns the row divs. See jQuery.has()
Here is an example: jsFiddle
Maybe this works for you?
$('#test').parent().parent()
You would only need to specify..... #test
You can use jQuery .find helper to let it work with one or multiple same ids:
$('div.row').find('div#test').show();
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I am looking for a selector which applies to any div element that contains an element identified by the p.my selector
<div>
<p class="my">
prova
</p>
</div>
No, there is no specific parent selector in CSS, but I know two other ways:
You just give the <div> a class or id.
You could install jquery and use:
$('p.my').parent().css({/*some css*/});
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 9 years ago.
Is there are way in CSS to target every p preceding a div.carrots? In this case we would get Munch but not Burp.
<p>Munch Munch!</p>
<div class="carrots">
</div>
<p>Burp!</p>
<div class="potatoes">
</div>
There is no "previous sibling" selector. Only The adjacent and general combinators, which require the target sibling to be after the first.
In order to select <p> in this case, you can surround the contents with some element (say, .container and use .container p:first-child as the selector. I don't think things would be all that different if you did this either:
<div class=carrots>
<p>Munch Munch!</p>
<div>
</div>
</div>
This question already has answers here:
Select deepest child in jQuery
(7 answers)
Closed 7 years ago.
Is there a way to select the inner child (deepest) using css selectors. Se example below:
<div class='d1 view'>
<div class='d2 view'>
<div class='d3 view'></div>
</div>
<div class='d4 view'>
<div class='d5 view'>
<div class='d6 view'></div>
</div>
</div>
</div>
The d1-d6 classes is just for simplifying my question.
I now want to select d3 and d6.
Note the list of children can be infinite. So is there a way to select - using css selectors - the deepest child?
I made a JSFiddle using jQuery
Currently with CSS there is no way to select the deepest child of a parent element. You'll have to resort to jQuery to solve this.
There are a couple of questions that cover this already.