Home/ Questions/Q 6714715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:31:41+00:00

Let’s say I have three div elements with classes a , b , and

  • 0

Let’s say I have three div elements with classes a, b, and c, respectively. I want to use css to toggle the display of these elements between none and block, depending on whether or not a parent element has a class of current or is hovered. The elements always toggle together, never individually.

I can a) toggle the display on the elements individually, or I can b) wrap them in a fourth div that is otherwise non-functional and toggle display on that element instead.

So, for instance, it’s this:

<li>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</li>

li > .a,
li > .b,
li > .c {
  display: none;
}

li:hover > .a,
li.current > .a,
li:hover > .b,
li.current > .b,
li:hover > .c,
li.current > .c {
  display: block;
}

versus this:

<li>
  <div class="wrap">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
  </div>
</li>

li > .wrap {
  display: none;
}

li:hover > .wrap,
li.current > .wrap {
  display: block;
}

There’s an obvious code-cleanliness difference in the css, at the expense of some additional html structure, but I think the net is in favor of using the wrapper.

I’m wondering if there are any other benefits or costs, such as browser performance, one way or the other between the two options.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Actually, you don’t have to do either :). You’re using CSS!! Consider the following:

    <!-- Notice the space between the class names -->
<li class="switch">
    <div class="a toggle"> ... </div>
    <div class="b toggle"> ... </div>
    <div class="c toggle"> ... </div>
</li>

    Now, you can keep your styling elements for a, b, c. By adding a simple CSS style, you can cover both of your sets of needs quickly and easily. Additionally, its abstracted, so you could use it in more places, when needed. No addition of DOM elements necessary and no real changes to your current styling code for a, b, and c. Furthermore, your switch doesn’t even have to be an li.

    .switch:hover > .toggle,
.switch.current > .toggle { display:block;
}

    Additional Information on CSS classes

    Elements may be of more than one class. By utilizing this, you can separate pseudo-functionality from look inside your CSS. When utilizing multiple classes, the browser will combine the rules of both to complete its style.

    Consider the following:

    <body class="article twocolumns">
    • The body element will have whatever html positioning, and overall document overrides.
    • The article class would have whatever presentation styles you might need.
    • The twocolumns would have whatever layout parameters your require.

    You may provide individual or combination styles, like so:

    body { 
    margin:0 auto; 
}
.article { 
    background-color:white;
}
.twocolumns {
    background-image: url("divider.png");
}

/* This is a combination style. Notice no space between the two classes. */
.article.twocolumns > div { 
    padding:15px; 
    float:left; 
    width:50%; 
}
/* A possible further extension. */
.article.onecolumn > div {
    padding:20px; 
    float:none; 
    width:100%; 
}
.article.threecolumn > div { 
    padding:10px; 
    float:left; 
    width:33%; 
}

    Learning to do things in this way has a number of benefits. It allows you to abstract functionality, layout and presentation elements easier allowing you to “port” either to other web projects you might have. It allows you to find what works cross-browser more effectively for more unified look and feel. It also reduces the tendency to accidentally tweak rules that might not be related to your issue. Finally, it reduces your dependency on extraneous DOM elements allowing you to keep your performance.

    Hope this helps.
    FuzzicalLogic

    • 0