How do I use the properties of a parent element in the child’s CSS?

Asked

Viewed 897 times

0

I have a <div> with fixed values, and it has a <ul> internally, as shown below:

<div id="personalizado">
    <ul>
      <li>item</li>
      <li>item_extremamente_longo_que_força_o_elementoa_vazar_para_fora_da_pagina</li>
      <li>item</li>
      <li>item</li>
    </ul>
</div>

div#personalizado{
    width: 400px;
    height: 300px;
}

ul{
  /*inserir aqui o estilo*/
}

But I want the <ul> or any other tag I insert after does not "leak" out, setting the maximum or minimum size of the child element according to the parent element properties. How can I do that?

What I imagine would be something like this:

#filho{
    max-width: #pai:width;
}
html css html5 css3
  • 1

    And how would you like to display this content? What should happen to content that exceeds the width of the parent element?

  • 1

    Guy is just you put max-width: 100% in direct children, but your question is may no context, because the son of the son can leave the grandmother, if the grandson has a fixed value in px for example he can leak the grandmother, it was not very clear, it would be better to explain the situation, because not always an answer will work for all cases....

  • @hugocsl was more of a curiosity anyway, I saw places where I used the same properties of the parent element (or based on it) and thought maybe it would be interesting to use the parent attributes directly instead of setting them manually

  • 1

    don’t you worry about it, treat each married, or things can easily get out of hand in your layout... my personal opinion...

2 answers

1


Use the property inherit with her you inherit the value of the parent tag:

#filho{
    max-width: inherit;
}

So he’ll get the max-width tag father.

NOTE: as the property inherits the value of the parent tag, so soon you have to set a value of max-width on the parent tag, otherwise it won’t work.

1

You can use 2 selectors, the > and the * and do so:

.pai > * {
  color: blue;
}
<div class="pai">
<span>Eu não estu dentro da li</span>
<ul>
  <li>Eu estou dentro da li</li>
</ul>
</div>

The asterisk targets all elements, the > (higher) has as characteristic the children of an element, that is, if you use the 2, you will be picking all the children directly from the selected element. (direct because if it is a grandson element, it will not catch)

If you want to take all the elements even inside .father you can use .pai * {}

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.