Using CSS Target to Highlight Parent Div

Using CSS Target to highlight parent div

Unfortunately, there is no parent or ancestor types of selectors in CSS, for the reason that it is a major problem for browser performance. However, you can achieve what you want easily with JQuery:

$("a:target").parent().css("background", "yellow");

Is there a CSS parent selector?

The Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation, but is currently not supported by Firefox.

li:has(> a.active) { /* styles to apply to the li tag */ }

As of 2022, Firefox is the only browser not supporting it by default.

In the meantime, you'll have to resort to JavaScript in Firefox if you need to select a parent element with full cross-browser support.

CSS highlight a parent element when a child is highlighted

you can apply :hover to the elements... hovering a child will also imply the mouse being 'over' the parent.

In the simple case given.

li:hover{font-weight: bold;}

Now you want to restrict the child elements not being hovered over

li:hover li{font-weight: normal}

Now you need to re-highlight hovered children.

li:hover li:hover{font-weight: bold;}

JSFiddle example

How to style the parent element when hovering a child element?

I know it is an old question, but I just managed to do so without a pseudo child (but a pseudo wrapper).

If you set the parent to be with no pointer-events, and then a child div with pointer-events set to auto, it works:)

Note that <img> tag (for example) doesn't do the trick.

Also remember to set pointer-events to auto for other children which have their own event listener, or otherwise they will lose their click functionality.

div.parent {      pointer-events: none;}
div.child {    pointer-events: auto;}
div.parent:hover {    background: yellow;}

<div class="parent">  parent - you can hover over here and it won't trigger  <div class="child">hover over the child instead!</div></div>

On child hover change the css of Parent

As already mentioned there is no parent selector but if you recognise that you are already hovering over the parent you can achieve what you want.

A rough example:

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

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

<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>

child selector in CSS,how do i target only the parent items and child items

I would do:

 div#container ul li{  
   color: red;  
 }
 div#container ul li ul li{  
   color: blue;  
 }

or even better, assign a class to the ul:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 ul.parentList li{  
   color: red;  
 }
 ul.childList li{  
   color: blue;  
 }
</style>
</head>

<body>
    <div id="container">  
        <ul class='parentList'>  
            <li> Parent List Item  
                <ul class='childList'>    
                    <li> Child List Item  </li>  
                </ul>  
            </li>  
            <li> Parent List Item </li>  
            <li> Parent List Item </li>  
            <li> Parent List Item </li>  
        </ul>  
    </div>  
</body>
</html>

Select only elements that don't have a parent with defined class

I don't think you can use combinator selectors with :not as stated in the documentation:

This selector only applies to one element; you cannot use it to
exclude all ancestors. For instance, body :not(table) a will still
apply to links inside of a table, since <tr> will match with the
:not() part of the selector.

You could try something like this:

div {  background-color: red;  padding: 5px;}
.child {  background-color: green;  padding: 5px;}
.dontSelect .child {  background-color: initial;}

<div>  <div class="child">    Select this  </div>  <div class="dontSelect">    <div>      <div class="child">        Don't select this      </div>    </div>  </div></div>

Using CSS Target to Highlight Parent Div