ごきげんよう。

たまに思い至ったようにweb制作に関する記事をあげる綾崎です。

今回は、スタイルの当て方で、特定の文字列を含むdomにスタイルを当てたい場合のやり方です。

特定の文字列を含むセレクタ、及びその位置で対象を絞り込む

前方一致
[属性^=”文字列”] {}

後方一致
[属性$=”文字列”] {}

部分一致
[属性*=”文字列”] {}

使用例

私が今回この方法を調べたのは、
WordPressの投稿にYouTubeの動画を埋め込む際に、入力者のコストを極力減らしたかったため、
divを追加したり、ってことをしたくなかったんです。

なので、

iframe[src*="youtube"] {}

としました。

「src属性のなかにyoutubeの文字列があるiframeダグ」という指定になります。

場合によりけり、使いこなせたら便利そうですよね。

忘れないようにと、メモでした。

それでは。

（ちなみにこの案件、結果としてはこの方法だけでは思ったようなスタイルが当てられなかったため、iframeをdivで囲うjsを記述して対応しました。）