在CSS和本机Javascript中选择没有任何子元素的父元素

Question

Firstly, the CSS

I would like to select only the parent element without any of its children. Not sure how to do this; I have experimented with the :not() pseudo-class to no avail.

In this case, I am doing this because I want to reduce the brightness of the parent of an accordion on hover.

Without attempting to isolate the parent, it is something like:

.parent:hover {
  filter: brightness(85%);
}

However, this will cause all of its children to darken as well. As I also have some later .parent classes inside of .parent classes, mousing over them will double the effect.

Instead, I would like ONLY the parent to be darkened. How can I achieve this?

Note: I have not gotten anything like .parent:hover:not(.parent *) to work.

And the Javascript (native)

These .parent elements are also accordions that work based off of toggling an active class on them via a click listener in Javascript. Of course, this means that I activate the accordion on the .parent element when clicking on its children in the same manner that the brightness works.

So how can I either a) add the click listener to elements with the .parent class and not their children, or b) check if a child element in the .parent -classed element was clicked on to trigger the listener?

Current code:

var accordians = document.getElementsByClassName("accordian");
var i;
for (i = 0; i < accordians.length; i++) {
  accordians[i].addEventListener("click", function() {
    var acc = this;
    acc.classList.toggle("active");
    // sitelist-container elements are "expanded" when the accordions are clicked
    var sitelist = acc.getElementsByClassName("sitelist-container")[0];
    if (sitelist.style.display == "") {
      sitelist.style.display = "block";
    } else {
      sitelist.style.display = "";
    }
  });
}

Any help for the CSS or for the Javascript would be appreciated.

---

EDIT: Thank you for the feedback about using the background color instead of a brightness filter. It actually looks better overall when using this strategy.

However, I still have an issue... how can I make it so that this styling only takes place when I hover over the parent element and not its children elements? Is this at all possible, or should I fundamentally redesign how I am attacking this problem?

Answer 1

For your CSS, Unfortunately, you are unable to filter the parent without filtering the child. So, we will reflect on a similar problem with background-color instead.

If you style on a parent element, it is styling the parent element, and because the default background-color is transparent, it seems like the rest of the elements have the same color, but they are not . However, by adjusting the default or simply setting the same property to a different value, you will see the problem resolved. Take a look at the following example:

 div * { background-color: white; } div { background-color: red; border: 1px solid black; } 

 <div> <p> This is a paragraph about life. Life is 42. This is from the Hitchhiker's guide to the Galaxy. </p> <p> This is another paragraph. </p> </div> 

Without the div * rule, the background-color is by default transparent. You can think of setting the div * or * as resetting the default. Then, only your parent selector is changing, and the children stay the same.

Alternative Solution

There is another solution, that's a little wacky, but it works. You could code two div s that are siblings under the body instead of a child-parent relationship and use positioning to position the second div inside the first. Here is a working fiddle that represents this. http://jsfiddle.net/404_Error/td13ophq/