If you're looking to achieve this using jQuery instead of CSS, you can utilize a sibling combinator, assuming the .tree-child-folders element appears before the .tree-collapsed element. One approach is to use the "subsequent sibling combinator" (~):
$(document).ready(function() {
$(".tree-node > .tree-child-folders ~ .tree-collapsed").css("color", "red");
});
Here's a Live Example:
$(document).ready(function() {
$(".tree-node > .tree-child-folders ~ .tree-collapsed").css("color", "red");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tree-node">
<span class="tree-child-folders tree-line">TEST1</span>
<span class="tree-collapsed">CHANGE COLOR</span>
<span class="tree-test">TEST3</span>
</div>
<div class="tree-node">
<span class="tree-child-folders tree-line">TEST4</span>
<span class="tree-other">TEST5</span>
<span class="tree-test">TEST6</span>
</div>
<div class="tree-node">
<span class="tree-line">TEST7</span>
<span class="tree-collapsed">TEST8</span>
<span class="tree-test">TEST9</span>
</div>
If the order is not consistent, you may need to resort to looping through the elements:
// Find all `.tree-node > .tree-collapsed` and iterate through them
$(".tree-node > .tree-collapsed").each(function() {
var $this = $(this);
// Check if this parent also has a `.tree-child-folders` element
if ($this.parent().find(".tree-child-folders").length) {
// If yes, change the color to red
$this.css("color", "red");
}
});
Here's a Live Example of the looping method:
$(document).ready(function() {
// Find all `.tree-node > .tree-collapsed` and iterate through them
$(".tree-node > .tree-collapsed").each(function() {
var $this = $(this);
// Check if this parent also has a `.tree-child-folders` element
if ($this.parent().find(".tree-child-folders").length) {
// If yes, change the color to red
$this.css("color", "red");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tree-node">
<span class="tree-child-folders tree-line">TEST1</span>
<span class="tree-collapsed">CHANGE COLOR</span>
<span class="tree-test">TEST3</span>
</div>
<div class="tree-node">
<span class="tree-child-folders tree-line">TEST4</span>
<span class="tree-other">TEST5</span>
<span class="tree-test">TEST6</span>
</div>
<div class="tree-node">
<span class="tree-line">TEST7</span>
<span class="tree-collapsed">TEST8</span>
<span class="tree-test">TEST9</span>
</div>