Question 375075 in Html Question posted in
Some basic documentation can be found here.

Html – Selecting all elements but one

I’m coding a dropdown, but don’t want an element with the class .dropdown-content, nor the tag <div> with :hover, but instead, all tags (excluding <div>s and .dropdown-content).

I have no idea what to put there as I don’t have any knowledge about this situation.

Tags:

2

Answers


  1. 0

    In the :not() function, we can specify values that should not apply to the given element, in our case, they should not be hovered over.

    .dropdown-content:not(:hover) {
  background: lightblue;
}
    <div class="dropdown-content">Example # 1</div>
<div class="dropdown-content">Example # 2</div>
<div class="dropdown-content">Example # 3</div>
<div class="dropdown-content">Example # 4</div>
<div class="dropdown-content">Example # 5</div>

    Another concept is that every element belongs under a common parent. If the parent is hovered over, we modify all children except the one specifically being hovered over. In CSS, the last strongest modification applied to a specific element always prevails. Therefore, if you modify all your children and then override the exceptions with an equally strong or stronger rule, you achieve the same result: you select everything except the exceptions.

    /* change all child elements */
.dropdown-content {
  background: lightblue;
}

/* except the one being hovered */
.dropdown-content:hover  {
  background: transparent;
}
    <div class="dropdown-content">Example # 1</div>
<div class="dropdown-content">Example # 2</div>
<div class="dropdown-content">Example # 3</div>
<div class="dropdown-content">Example # 4</div>
<div class="dropdown-content">Example # 5</div>

    Or… Since I don’t know the goal, for example, it’s can align the style with the container’s hover.

    /* change all child elements */
.container:hover .dropdown-content {
  background: lightblue;
}

/* except the one being hovered */
.container .dropdown-content:hover  {
  background: transparent;
}
    <div class="container">
  <div class="dropdown-content">Example # 1</div>
  <div class="dropdown-content">Example # 2</div>
  <div class="dropdown-content">Example # 3</div>
  <div class="dropdown-content">Example # 4</div>
  <div class="dropdown-content">Example # 5</div>
</div>

    More information

    Login or Signup to reply.
  2. 0

    It sounds like you want to apply some CSS styling to all elements except for those with the class .dropdown-content and all <div> elements. You can achieve this by using the :not() pseudo-class selector in CSS.
    Here’s a sample CSS code snippet that applies the style to all elements except those with the class .dropdown-content and all <div> elements:

    :not(.dropdown-content):not(div) {
    /* your styles here */
}

    In this CSS rule, the * selects all elements, :not(.dropdown-content) excludes elements with the class .dropdown-content, and :not(div) excludes all <div> elements.
    Please replace /* your styles here */ with the actual CSS properties and values you’d like to apply.
    This method can be very powerful but needs to be used with care, as it can easily override other styles you may have in your CSS. Always test thoroughly to ensure it behaves as expected across all elements and layouts.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search