コンテンツに応じた条件付きCSS

Question

コンテンツタイプに応じて、CSSエレメントにクラスを追加したり追加したりするにはどうすればよいですか。 私の例：このようなiframeが含まれている場合、p要素にクラスまたはスタイルを追加したいと考えています。

if p contain iframe add class 'myclass' to p 

私はSASSでそれを行うか、私はJSが必要行うことができます。

<p><iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="https://www.hashdoc.com/documents/185392/embed" style="border:1px solid #EAE9EA; border-width:1px; margin-bottom:5px; max-width: 100%;" title="Les résultats aux examens" width="550"></iframe></p> 

だから、そのようなものだろうか？

EDIT：私の最後のjqueryのコード

$(".page-lycee p:has(iframe)").addClass('external-content'); 

Answer 1

限り私はそれはCSSで現在はできません知っています。これはjQueryで修正できます。

例コード：

$('p:has(iframe)').addClass('myclass'); 

Answer 2

pは以下のようなiframeているかどうかをチェックするために.has()を使用することができます：あなたはjQueryのセレクタを使用することができます

$("p").has("iframe").addClass('myClass');

.myClass{ 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="https://www.hashdoc.com/documents/185392/embed" style="border:1px solid #EAE9EA; border-width:1px; margin-bottom:5px; max-width: 100%;" title="Les résultats aux examens" 
 
    width="550"> 
 
    </iframe> 
 
</p> 
 

 
<p> This will not have the class "myClass"</p>

Answer 3

を:has()

$("p:has(iframe)").css("border", "solid red"); 

例： https://www.w3schools.com/jquery/sel_has.asp