特定のカテゴリのロゴサイズ、直接アクセス時のみ適用

バグ
1

特定のカテゴリのロゴサイズを調整するために、以下のCSSを追加しました。しかし、このCSSはリンクからカテゴリにアクセスした場合にのみ適用されます。以下をご覧ください。

Contests - Forum | Cannabisanbauen.net (3.2 stableで稼働しています)

CSS (Common内):

/* Contest カテゴリ - 各コンテストサブカテゴリのカテゴリ画像 */
body[class^="category-contests"] {
@supports (--custom: property) {
.category-logo.aspect-image {
    --max-height: 250px;
}
.category-boxes .category-box .category-logo.aspect-image img, .category-boxes-with-topics .category-box .category-logo.aspect-image img {
    --height: 250px;
}
}
}

しかし、フォーラムの別のページからアクセスすると、CSSが「トリガー」されず、カテゴリロゴはデフォルトのサイズになります。

再現手順:

  1. https://forum.cannabisanbauen.net/ にアクセスします。
  2. サイドバーまたはカテゴリピッカーから「Contests」カテゴリに移動します。
  3. カテゴリロゴはデフォルトのサイズになります。

これはバグでしょうか、それともCSSの実装方法を変更する必要がありますか？

2

これは珍しい問題ですね！

ページへのアクセス方法によって、<body> に割り当てられるクラスの順序が異なることに気づきました。

image
image925×184 38.5 KB

「body[class^=\"category-contests\"]」の「^」記号は、クラスリストの先頭でのみ一致を検索するため、‘category-contest’ がリストの最初のクラスである場合にのみ機能していたと推測されます。

クラスリスト内のどこでも一致を検索する「*」記号もあります。最初の部分を次のように変更してみてください。

body[class*="category-contests"]
          ↑ (* を ^ の代わりに)

または、より簡単な書き方は次のようになります。

body.category-contests

これで解決するかどうか教えてください！

「いいね！」 2
3

ありがとうございます。それが解決しました…なぜあんなに複雑にしてしまったのか分かりません :smiley: