So i decided to nest three divs as follows for experimental purposes
<div>
<div>
<div>
</div>
</div>
</div>
I then went ahead and decided to target the inner divs as follows using css:
div {
border: 1px solid black;
padding: 40px;
background: white;
}
div > div:hover {
box-shadow: 0 0 0 40px white;
}
div > div:hover{
box-shadow: 0 0 0 80px white;
}
What I expected to happen, is either for the page to break, or for it to select all of the divs at once. However, oddly enough it is targeting the divs one by one, propagating if you will.
div {
border: 1px solid black;
padding: 40px;
background: white;
}
div > div:hover {
box-shadow: 0 0 0 40px white;
}
div > div:hover{
box-shadow: 0 0 0 80px white;
}
<div>
<div>
<div>
</div>
</div>
</div>