从子div获取父div

Question

I have below structure

<div class="A">
    <div title="Sales"></div>
</div>

Class A is common and present at many places on page hence i am not able to select appropriate div with class A.

I have child div with title "sales" or anything else unique at each places, I am able to get that child div with below code div[title='Sales']{ background-color:skyblue; } div[title='Sales']{ background-color:skyblue; }

Now i want to select its parent div from above child div to apply background color to entire parent div Please help

Answer 1

Why you don't solve this like my snippet. We probably solve em with css not js. you are using parent in your js which makes your codes more and even there's no logic for doing this why we do hard thinks?!

 <div class="A Sales"> <div title="Sales"></div> </div> <div class="A Products"> <div title="Sales"></div> </div>

Answer 2

In CSS you can't access the parent div given a specific child element but you could fake this behaviour by adding a box-shadow to the child element, eg

 .A { border: 1px lightblue dashed; padding: 100px; overflow: hidden; } [title="Sales"] { border: 1px yellowgreen dashed; box-shadow: 0 0 0 100vmax skyblue; /* or a higher value */ }

 <div class="A"> <div title="Sales">Sales</div> </div>

The hidden overflow applied to the parent will clip the area of the shadow.

Answer 3

As there are many tags in your question:

Jquery:

$("div[title='Sales']").parent()

or, better, with a filter on which parent:

$("div[title='Sales']").parents(".A")

in vanilla JS:

document.querySelectorAll("div[title='Sales']").parentNode

or

document.querySelectorAll("div[title='Sales']").parentElement

With CSS is currently not possible to select an element based on the child properties, but there are other ways to implement this behaviour.