Copy css from a parent element (from the father) to the child

Question

Copy css from a parent element (from the father) to the child

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

Good, I have this structure.

<div class="contenedor-abuelo(?)">
<div class="caja-padre">
    <div class="caja-hijo"></div>
</div>
<div class="caja-padre">
    <div class="caja-hijo"></div>
</div>
<div class="caja-padre">
    <div class="caja-hijo"></div>
</div>

.contenedor-abuelo{width:80%;}
.caja-padre{width:30%;}

I need a way to assign to the "child-box", the current width of the container-grandfather, is there a plugin or script that I can use?

javascript jquery css

asked by Andrikol 26.09.2017 в 19:14

source

2 answers

1

addClass ()

I would not copy the "style" but assign a class. In this example you can see.

The grandfather has the wide calse80. Father wide class30. The son should occupy the width of the father. But I have assigned the class width80 by addClass() thus occupying 80% of his father. (What you can not do is that the child occupies more than the father to look like grandfather, for example)

I've done it for you, but if you want the son to have the same style as the father, you just have to assign him a specific class that contains that style. Both father and son (widht, colors, typographies, ...)

$(document).ready(function(){
  $(".caja-hijo").addClass("ancho80");
})

.ancho80{
width:80%;
}

.ancho30{
width:30%;
}

.contenedor-abuelo{
background-color:red;}

.caja-padre{
background-color:green;
}

.caja-hijo{
background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenedor-abuelo ancho80">
<div class="caja-padre ancho30">
    <div class="caja-hijo">caja-hijo</div>
</div>
<div class="caja-padre ancho30">
    <div class="caja-hijo">caja-hijo</div>
</div>
<div class="caja-padre ancho30">
    <div class="caja-hijo">caja-hijo</div>
</div>

answered by 26.09.2017 в 19:31

How to deal with a bidimesional array passed by pointer? C How to distribute a .jar on mac using .dmg with Drag & Drop?

score 2 · Accepted Answer

Only with CSS - occupy the whole width of the grandfather

You could give the child an absolute position and a width of 100% and the grandfather relative position to use it as a reference and jump to the father, something like this:

div {
  box-sizing: border-box;
}

.contenedor-abuelo {
  height: 200px;
  width: 80%;
  background-color: red;
  position: relative
}

.caja-padre {
  height: 50px;
  width: 30%;
  background-color: blue;
}

.caja-hijo {
  height: 25px;
  width: 100%;
  background-color: green;
  position: absolute;
}

<div class="contenedor-abuelo">Abuelo
  <div class="caja-padre">Padre
    <div class="caja-hijo">Hijo</div>
  </div>
  <div class="caja-padre">Padre
    <div class="caja-hijo">Hijo</div>
  </div>
  <div class="caja-padre">Padre
    <div class="caja-hijo">Hijo</div>
  </div>

With jQuery - pick up the width of the grandfather and pass it to the child

var anchoAbuelo = $(".contenedor-abuelo").width();
$(".caja-hijo").width(anchoAbuelo);

div {
  box-sizing: border-box;
}

.contenedor-abuelo {
  height: 200px;
  width: 80%;
  background-color: red;
}

.caja-padre {
  height: 50px;
  width: 30%;
  background-color: blue;
}

.caja-hijo {
  height: 25px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenedor-abuelo">Abuelo
  <div class="caja-padre">Padre
    <div class="caja-hijo">Hijo</div>
  </div>
  <div class="caja-padre">Padre
    <div class="caja-hijo">Hijo</div>
  </div>
  <div class="caja-padre">Padre
    <div class="caja-hijo">Hijo</div>
  </div>