要素内の特定の子要素には適用させないようにするには？

Question

以下のコードの『フォーラム:』を『カテゴリ:』に置換したいのですが、

<span class="bbp-topic-started-in">
 フォーラム: 
 <a href="http://XOXO.com/forums/forum/">
 ゲーム
 </a>
</span>

以下のようにすると『ゲーム』も削除されてしまいます。

span.bbp-topic-started-in{display:none;}

子要素に適応させなければ良いので、以下のようにコードを書き直しましたが、次は反映されませんでした。

span.bbp-topic-started-in :not(a){display:none;}

ページの更新をしたりキャッシュの削除を試してみたのですが変化がありません。
まず、コードがあっているのかどうか教えて頂きたいです。

このコードで解決致しました。

span.bbp-topic-started-in {
  visibility: hidden;
}
span.bbp-topic-started-in::before {
  visibility: visible;
  content: "カテゴリ: ";
}
span.bbp-topic-started-in a {
  visibility: visible;
  display: inline-block;
  margin-left: -5.5em;
}

Answer 1

HTMLは変更不可。CSSのみで変更したいということなら、無理矢理ですが、下記でどうでしょう。

span.bbp-topic-started-in{
  font-size: 0;
}
span.bbp-topic-started-in::before {
  content: "カテゴリ: ";
  font-size: 1rem;
}

span.bbp-topic-started-in a {
  font-size: 1rem;
}

Answer 2

あくまで現状のHTMLに対してCSSのみで解決したいということであれば、以下のコードでどうでしょう？

span.bbp-topic-started-in {
  visibility: hidden;
}
span.bbp-topic-started-in::before {
  visibility: visible;
  content: "カテゴリ: ";
}
span.bbp-topic-started-in a {
  visibility: visible;
  display: inline-block;
  margin-left: -5.5em;
}

Comments

[Iori11]

一番簡単に変更ができ、回答が早かったlifull_shimaokkさんをベストアンサーに致します。
皆様ありがとうございました。

[hatena19]

テキスト長によって margin-left で位置調整しなければないならいのが、ちょっと難点かな。

[recal]

課題はクリアされているかもしれないが、ベストアンサーとしては適していない

[lifull_shimaokk]

>>hatena19
おっしゃる通り、margin-leftによる調整が難点ですね。

>>recal
ベストアンサーか否かは質問者の方が判断することなので、私からは特にありません。

Answer 3

visibility:hidden と visiblity:visible の組み合わせでそれっぽいことができるような気がしますが、

『フォーラム:』を『カテゴリ:』に置換したい

これが目的であれば、JavaScriptコードでそのようにテキストを置換するのが最も素直かと思います。

または「フォーラム: ゲーム」と「カテゴリ: ゲーム」の両方を用意して片方を非表示にするとか。

Answer 4

まず、コードがあっているのかどうか教えて頂きたいです。

間違っています。「ある要素の直下のテキストにのみ適用する」ようなセレクタはありません（色などであれば「子要素で再設定して上書きする」という手段はありますが、そこだけ非表示というのは難しいです。）。

Comments

[Iori11]

「子要素で再設定して上書きする」という手段を教えて頂けませんか？

[maisumakun]

span.bbp-topic-started-in *に対してCSSをあとから適用すれば、span.bbp-topic-started-inの上書きが可能です。

（display:noneに対しては、この方法は使えません）

[Lhankor_Mhy]

横からすみません。

「継承を打ち消せば」という意味だと思いますが、全称セレクタは詳細度の点数を持っていないのでそのセレクタたちの詳細度は等しいです。未来に誤解を生むかもしれません。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity#:~:text=%E5%85%A8%E7%A7%B0%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%83%BC

[Lhankor_Mhy]

あ、glob なのか。
でしたら失礼しました。

[maisumakun]

失礼しました。詳細度は同じなので、順序での制御が必要ですね。

Answer 5

CSSのみでやるのは難しいでしょうね。jsつかっていならたとえばこう

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.bbp-topic-started-in').forEach(x=>{
    x.childNodes.forEach(x=>{
      if(x.nodeType=="3"){
        x.textContent=x.textContent.replace(/フォーラム/g,'カテゴリ');
      }
    });
  });
});
</script>

</style>
<div class="wrap">
<span class="bbp-topic-started-in">
フォーラム_フォーラム_フォーラム: 
<a href="#">
ゲーム
</a>
</span>
<span class="bbp-topic-started-in">
フォーラム: 
<a href="#">
テスト
</a>
</span>
</div>