CSS selectors

Submitted by Duongdk on Tue, 09/09/2025 - 18:37
Forums: 
General discussion

Hi

I am currently working on some css changes. I have been using the inspection tool to identify the selectors but sometimes I can't seem to find them.

Is there a complete list somewhere with all the selectors?

Thanks 

otacke's picture

otacke

Wed, 09/10/2025 - 14:08

No, there's no such list (and it probably would not make sense). You might want to share where exactly you run into issues.

Duong Tran

Thu, 09/11/2025 - 18:49

I have made some css changes to most of the content text (see below). However, I don't want the line height to apply to the draggable words in the Drag the words quiz, because it makes the elements too high. How can I make the css below NOT target the draggable elements, while still targeting the text that holds the drop zones. 
Here is the current css changes:

/* ========= FORCE: Opgavetekst-størrelse (gældende) ========= */

/* Desktop (>=1025px) */

.h5p-content .h5p-question .h5p-question-content,

.h5p-content .h5p-blanks .h5p-question-content,

.h5p-content .h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph,

.h5p-content .h5p-drag-text .h5p-question-content p,

.h5p-content .h5p-multichoice .h5p-alternative-container,

.h5p-content .h5p-summary .summary-evaluation-content {

  font-size: 1.3rem !important;

  line-height: 2 !important;

  font-weight: 300 !important;

}

/* Arv ind i almindelige tekstnoder */

.h5p-content .h5p-question .h5p-question-content p,

.h5p-content .h5p-question .h5p-question-content li,

.h5p-content .h5p-question .h5p-question-content span,

.h5p-content .h5p-question .h5p-question-content div {

  font-size: inherit !important;

  line-height: inherit !important;

 

}

Duong Tran

Thu, 09/11/2025 - 18:58

Oh, I just managed to fix it! So please disregard my question. 

However, another issue has emerged, that also relates to the Drag the words quiz. I experience problems when I try to drop words into the drop zones, if the drop zones are either in the top of the text or in the bottom of the text. It's like there it a invisible border that wont allow me to place the words there. Is this a known issue?

Thanks in advance. 

otacke's picture

otacke

Thu, 09/11/2025 - 22:41

That's a known issue, and the fix has been merged in June and will supposedly be part of the next release. No, I don't know when that will be. And H5P Group normally won't tell. Should be a couple of weeks, I guess, as part of the new design.

Duong Tran

Thu, 09/11/2025 - 20:33

Oh, I did'nt manage to fix the line height issue after all. :( So any advice on that is still much appreciated... Sorry about the confusion.

otacke's picture

otacke

Fri, 09/12/2025 - 09:43

I don't see where the issue would be. The draggables themselves have the classname `ui-draggable`, and if you prefix that with the parent node's `h5p-drag-draggables-container`, the selector should be specific enough to not touch anything else, so

.h5p-drag-draggables-container .ui-draggable {
  line-height: var(--whateveryouwant);
}

Also, I noticed that you're using `!important` all over the place. That's not recommended, as it makes things harder to debug and maintain - and ultimately causes you to use it in more and more places. In yout case it might be okay, but it leaves a code smell. I suggest to rather learn about how CSS class specificity works.

Duong Tran

Fri, 09/12/2025 - 10:39

Thanks for the quick reply, Oliver. 

Regarding my issue with the line height in the Drag the words:

Is it possible to have different line height in the text that holds the drop zones and the draggable words? When I try to change one, the other changes as well. As I mentioned earlier, I would like to reduce the line height of the draggable words only.

Thanks