css change parent based on child code example

Example 1: css parent selector

/* There is no such selector
   in 2008, the following was suggested */

a < img { 'border': none }

/* Which in theory, would set an an images 'a' parent
   border to none
   Of course, this does not exist

   Another suggestion... */

div:parent { 'border': none }

/* Pretty self explainatory, nevertheless it does not
   exist.

   You will have to use JavaScript/jQuery */

$('some-element').parent();

Example 2: change parent div css on over of child

<ul id="main-menu">
  <li>
    <a href="#">
      <i class="fa fa-building-o" aria-hidden="true"></i>
      Private Limited
      <i class="fa fa-caret-down"></i>
    </a>
    <ul class="submenu">
      <li><a href="#0">Company</a>
      </li>
      <li><a href="#0">Contact</a>
      </li>
      <li><a href="#0">Industry</a>
      </li>
    </ul>
  </li>
</ul>

Example 3: change parent div css on over of child

#main-menu > li:hover > a
{
  background-color: #F00;
}

#main-menu >  li > .submenu > li:hover
{
  background-color:#00F;
}