2017-08-16 17 views
0

2つの特定の文字列のいずれかに一致するセレクタを、それらの間に動的文字列を使用して作成するにはどうすればよいですか:2つの文字列の間に文字列を持つCSSクラスのみを選択するにはどうすればよいですか?

例:だから、

[class*="animation-"**"-infinite"] { 
    animation-iteration-count: infinite; 
} 

これらのクラス標的とすることができるようになります:

class="animation-hover-infinite" 
class="animation-scale-infinite" 
class="animation-opacity-infinite-somethingElse" 
class="animation-etc-infinite withSomeOtherClass" 

をしかし、このターゲットではない:

class="animation-something" 
class="something-infinite" 

は、この可能ですか?または、これを実現できる他のCSSセレクタがありますか?

+0

残念ながらそれは、CSSは、セレクタがサポート属性のものではありません。ドキュメントで現在サポートされているものを見ることができます:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – gespinha

+0

これにはJavaScriptが必要です。 – TylerH

答えて

2

開始と終了を確認できます。

div[class^="animation-"][class$="-infinite"] { 
 
    animation-iteration-count: infinite; 
 
    background: red; 
 
} 
 

 
div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
    margin-bottom: 1em; 
 
}
<div class="animation-blabla-infinite"></div> 
 
<div class="animation-blabla-infinites"></div> 
 
<div class="zanimation-blabla-infinite"></div>

+0

ありがとうございます。これは、クラスが特にアニメーションblabla-infiniteを持っている場合にのみ可能です。 class = "animation-blabla-infinite another-class"で動作させることは可能ですか? – Jonathan002

+0

これは 'class =" animation-opacity-infinite-somethingElse "' – Ehsan

+0

@ehsanでは機能しません。それらの間に動的文字列を持つ2つの特定の文字列の任意のセット。私は例を見ていませんでした。今私は、彼らは最初の要求と一致しません。 – Gerard

関連する問題