Module Class Suffix Child Div

Question

Joomla! 3.9.1

I've created a 'custom html' module and in the module settings Advanced > I've added the feature-box suffix.

In my custom.css file I have added the following code;

.feature-box {
  border: 3px solid #039be5;
  margin-bottom: 13px;
  text-align: center;
}

When I view my site front end the css is duplicating, see image;

Looking at the console I can see that the class is being added in two places. See image;

Am I doing something incorrect or is this a bug? I've seen a similar issue here but couldn't find a resolution without editing core files.

Answer 1

The forum thread that you linked suggests that there is little that can be done to squash this bug without breaking other things.

I just realized that Joomla Stack Exchange doesn't offer a "runnable snippet" in the answers (so I wrote up this solution at StackOverflow to test it, then transferred it here).

The advice from the forum is to adjust your css declaration to isolate the desired element. If you want to target the outer one, you could could additionally check for the class(es) of t3-module and/or module. Or as I will demonstrate, you can also check for the existence of an id attribute.

.feature-box[id] {
  border: 3px solid #039be5;
  margin-bottom: 13px;
  text-align: center;
}

<div class="t3-spotlight t3-feature-1  row">
  <div class=" col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <div class="t3-module module feature-box" id="Mod738">
      <div class="module-inner">
        <h3 class="module-title ">FEATURE BOX 1 CONTENT</h3>
          <div class="module-ct">
            <div class="custom feature-box">feature box 1 content</div>
          </div>
        </h3>
      </div>
    </div>
  </div>
</div>

Of course, other css trickery could be used if those techniques aren't suitable, such as checking for a certain parent element's attributes or even an ancestor's attributes and use > to denote the relationship down the DOM.

If I am mistaken and you don't want to style the outer box, but wish to style the inner box, then you could do something like:

.feature-box.custom {...}

or

.custom.feature-box {...}

This will target elements that contain both classes.

Answer 2

Since you have multiple classes for the element, you have two options.

The first one is to include the two classes in your style, to make it very specific.

This will target the outer selector:

.module.feature-box {}

This will target the inner selector:

.custom.feature-box {}

If you want your class it to be used in other elements of the site, for example if you are using atomic CSS, then you can do it the other way around and exclude the selector you don't want to target.

This will apply to anything except an element with the "module" class:

.feature-box:not(.module) {}

And this will apply to anything except an element with the "custom" class:

.feature-box:not(.custom) {}

Pseudo-classes are a very powerful tool in your CSS skillset. I strongly recommend you learn it. A good resource is https://css-tricks.com/pseudo-class-selectors

---

Another scenario:

If, by any weird chance, you have a scenario where the element only contains the class you added, for example:

<div class="wrapper">
    <div class="feature-box">
        <div class="something">
            <div class="feature-box">
                Your content here
            </div>
        </div>
    </div>
</div>

Then you can use specificity (or hierarchy) in your class.

To target only the outer div, you can use the code below. That will make sure that only the .feature-box div that is directly under .wrapper is targeted.

.wrapper > .feature-box {}

To target only the internal one, you have two options:

This first option will target any .feature-box that is inside another .feature-box, regardless of how many levels deep.

.feature-box .feature-box {}

This second option will target only .feature-box that is directly below .something.

.something > .feature-box {}

Specificity is a great tool, but one that should be used sparingly, since it can, and will, bloat your CSS.

Answer 3

The "t3-module" in the classes in the image there makes me suspect there's a template override going on, here. I'm not sure how confident you are in your php skills, but there's an opportunity there to edit that particular bit of module chrome in your template. (html/modules.php, probably)

OTOH, if you don't want to create your own override for the module format, then @mickmackusa's two-class approach will work fine, except in IE6 (which never liked that technique, but no one should worry about offending a browser from the last century these days).