2

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;

enter image description here

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

enter image description here

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.

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.