child tag specification

[aguilera51284]

I need to provide for the child tag. it is for more modularity.

[arccoza]

I'm not sure what you're asking, perhaps you can explain further with some html?

[aguilera51284]

it would be something like this

/* Input. */
.aspect-box {
  position: relative;
  background: lime;
  aspect-ratio: '16:9' 'image';
}

/* Output. */
.aspect-box {
  position: relative;
  background: lime;
  box-sizing: border-box;
}

.aspect-box > image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0; 
  left: 0; 
  box-sizing: border-box;
}

.aspect-box:before{
  position: relative;
  display: block;
  content: "";
  padding-top: 56.25%;
  box-sizing: border-box;
}

[arccoza]

/* Input. */
.aspect-box {
  position: relative;
  background: lime;
  aspect-ratio: '16:9';
}

/* Output. */
.aspect-box {
  position: relative;
  background: lime;
  box-sizing: border-box;
}

 /*This selector targets any immediate child, it should work for any situation.*/
.aspect-box > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0; 
  left: 0; 
  box-sizing: border-box;
}

.aspect-box:before{
  position: relative;
  display: block;
  content: "";
  padding-top: 56.25%;
  box-sizing: border-box;
}

You could have any element in the .aspect-box, the > * selector will select any child, so you could have:

<div class="aspect-box">
  <img src="">
</div>

I see no advantage to having a second argument to specify the child selector.

[aguilera51284]

this is my case in special.

the advantage is not having to overwrite styles...

[arccoza]

What you are saying is you have more than one child element inside your .aspect-box, and you want to apply the position:absol... etc child styles to a specific one?

[aguilera51284]

@arccoza yes!

[arccoza]

Because of the way the aspect-ratio trick works, by filling .aspect-box with padding, there is no actual room for child elements, that's why the child (.aspect-box > *) is absolutely positioned and made to stretch over the parent. You should generally only have one child element inside .aspect-box, it will then assume the size and ratio of its parent.

If you want to have multiple child elements you can:

• Place them all inside the first child (a wrapper element).
• Place them as direct children, but then they will all be absolutely positioned and stretched over the parent in layers.

This is how it is meant to work, if you try to add more children which aren't absolutely positioned they will stretch the parent, destroying the ratio.

If you want to change the styling of specific children, you can, the > * selector has very low specificity, and can be overridden easily, ex: .aspect-box > a will select all anchor children.