Conditional css depending on content

Question

How can I style or add class to a css element depending on content type. My example: I wish to add class or style a p element when it contain an iframe like this.

<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>

So it could be something like that:

if p contain iframe add class 'myclass' to p

Can I do that with sass or do I need js?

EDIT: my final jquery code

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

if you want to apply only first child (if it is iframe) then basically by css you can do it i.e. p > iframe { your css } and if you want to apply every iframe in p tag then directly use p iframe { css } — Dhara
– Dhara, Commented Jun 27, 2017 at 10:09

Companjo · Accepted Answer · 2017-06-27 10:08:48Z

1

As far as i know it's currently not possible with CSS. You can fix this with jQuery though.

Example code:

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

answered Jun 27, 2017 at 10:08

Companjo

1,78219 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaniqwa · Accepted Answer · 2017-06-27 10:08:32Z

1

you can use the jQuery selector :has()

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

example: https://www.w3schools.com/jquery/sel_has.asp

answered Jun 27, 2017 at 10:08

Shaniqwa

2,0942 gold badges19 silver badges31 bronze badges

Comments

Chiller · Accepted Answer · 2017-06-27 10:16:04Z

1

You can use .has() to check if p has iframe like follow:

$("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>

edited Jun 27, 2017 at 10:16

answered Jun 27, 2017 at 10:07

Chiller

9,7362 gold badges30 silver badges39 bronze badges

Collectives™ on Stack Overflow

Conditional css depending on content

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related