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>
Related
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
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 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 CSS parent selector?
(33 answers)
Closed 7 years ago.
How do I select the entire h4 node that doesn't contain h3 with class="avoid"? In this case I want to select the first and fourth h4 node.
<div>
<h4>
<h1><h1>
<h2><h2>
</h4>
<h4>
<h1><h1>
<h2><h2>
<h3 class="avoid"><h3>
</h4>
<h4>
<h1><h1>
<h2><h2>
<h3 class="avoid"><h3>
</h4>
<h4>
<h1><h1>
<h2><h2>
</h4>
</div>
First of all. Having heading tags inside another is not valid. Saying that..
CSS is not capable of selecting a parent based on nested elements.
You need JS to do such selections. A good read is this.
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.