Style from CSS class is not applied to the div with respective class

Andreas Kurz 0
Viewed 41

What is the reason that the CSS class style is not applied to the div with the class content__ticket, but the style of the class content__ticket__title is applied?

.content__ticket {
  display: grid;
  grid-template-rows: minmax(0, 96px) minmax(0, 38px) minmax(0, 296px) repeat(3, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 'title title title title' 'instruction instruction instruction instruction' '. qr-code qr-code .' '. . . .' 'mail-button mail-button finish-button finish-button' '. . . .';
  grid-gap: 20px;
  height: 100%;
}

.content__ticket__title {
  grid-area: title;
  height: 100%;
}
<div class="content__ticket">
  <div class="content__ticket__title block center">
    ...
  </div>
  ...
</div>

Applied styles of content__ticket

Applied styles of content__ticket__title

This style is in the same file as the style for content__ticket__title.

What did I try to fix it:

  1. I tried to rename the class to a cryptic name, that 100% wouldn't be used somewhere else.
  2. I tried making the CSS for specific with div.content__ticket

I am working on Electron Version: 9.0.3

electron css-grid css html
1 Answers

I solved it myself after tons of investigations I made the simplest mistake...

I had an empty css block over this one, but I didn't open or close {}.

So what happend it searched for a .content__ticket as a child of some other class:

.some_other_class
/* Ticket */

.content__ticket {
    display: grid;
    grid-template-rows: minmax(0, 96px) minmax(0, 38px) minmax(0, 296px) repeat(3, 1fr);
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 'title title title title' 'instruction instruction instruction instruction' '. qr-code qr-code .' '. . . .' 'mail-button mail-button finish-button finish-button' '. . . .';
    grid-gap: 20px;
    height: 100%;
}

Simple but anoying misstake...

Andreas Kurz0
Related