2

下記のやりたいことをjavascriptを使わずにcssだけで実現したい場合、
cssのセレクタはどのように指定すればよいのか教えていただきたいです。

やりたいこと

次のようなdivタグがあったとします。

<div class="hoge">りんご</div>
<div class="hoge">ばなな</div>

このときに、2個目のdivタグ(=「ばなな」が文字列に入っているdivタグ)のみfontサイズを12pxにしたい

.hoge {
  font-size: 12px;
}

.hogeだけだと両方にきいちゃいますが、文字列の部分一致、完全一致などで二番目のdivタグだけにきかせたいです。

よろしくおねがいします。

1
  • 補足として、2つのdivでclass名は全く同じもので保ちたいです 2019年11月17日 10:53

1 件の回答 1

3

cssだけで中身による選択はできないはずです.例えば,以下のような要素に対してマッチすべきかみたいなことを考えると,対応できないというのが何となくわかるのではないでしょうか.

<div class="hoge"><p>ばなな</p><img src="huga.png"/></div>
<div class="hoge"><p>banana</p><img src="ばなな.png"/></div>

そのようなセレクタでいうと,属性セレクタ(参考:https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)が一番近そうな気がします.HTML5では,カスタムデータ属性を自由に付けられるので,冗長ですがdata-content(名前は適当です)に同じ中身のテキストを与えて,属性セレクタでマッチさせることが可能です.

<div class="hoge" data-content="りんご">りんご</div>
<div class="hoge" data-content="ばなな">ばなな</div>
.hoge[data-content="ばなな"] {
  font-size: 12px;
}

参考

1
  • ありがとうございます。WordPressでの自動生成されるタグについてなのでdata-contentをいじることは難しそうです。javascriptで対応しようかなと思います。 2019年11月17日 12:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。