How a child can access it's parent's property only using CSS? is it possible?

Question

How each span element gets it's parent's title property in css? is it possible ? is it possible if I use scss or less or something?

<div>
<div title="hello"><span> </span></div>
<div title="dear"><span> </span></div>
<div title="world"><span> </span></div>
</div>

so after applying css styling, it's result should be equivalent to this

<div>
<div title="hello"><span>hello</span></div>
<div title="dear"><span>dear</span></div>
<div title="world"><span>world</span></div>
</div>

I know it's possible in js but I just need it in css. so it's not possible. is it possible if i use `scss` or `less` ? — blueseal, Oct 26 '19 at 05:46
@ibnelaiq he likely wants something like `div > span::before { content: div[title] }` which does not exist — mplungjan, Oct 26 '19 at 05:47

score 1 · Answer 1 · answered Oct 26 '19 at 05:58

No it is not possible that child can access it's parent properties in pure CSS.
There are some ways to access parent via child in javascript.
instead there is a a method of getting this :has.Documentation Here.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has

The following selector matches only <a> elements that directly contain an <img> child:

a:has(> img)

But there is no method to access the parent via child.

Like this you can access your parent like

div:has(> span){
//Do Here what you want./
}

As of 2019, this is still not supported by any browser.

How a child can access it's parent's property only using CSS? is it possible?

1 Answers1