Jak mogę stylować lub dodać klasę do elementu CSS w zależności od typu zawartości. Mój przykład: Chcę dodać klasę lub styl element P, gdy zawierają taką uwagę iframe.

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

Więc może to być coś takiego:

if p contain iframe add class 'myclass' to p

Czy mogę to zrobić z Sass lub czy potrzebuję JS?

Edytuj: mój ostatni kod jQuery

$(".page-lycee p:has(iframe)").addClass('external-content');
1
webmaster pf 27 czerwiec 2017, 13:02

3 odpowiedzi

Najlepsza odpowiedź

O ile wiem, nie jest obecnie możliwe w CSS. Możesz to rozwiązać z jQuery.

Przykładowy kod:

$('p:has(iframe)').addClass('myclass');
1
Companjo 27 czerwiec 2017, 10:08

Możesz użyć .has(), aby sprawdzić, czy p ma iframe jak następuj:

$("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>
1
Chiller 27 czerwiec 2017, 10:16

Możesz użyć selektora jQuery :has()

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

Przykład: https://www.w3schools.com/jquery/sel_has.asp

1
Shaniqwa 27 czerwiec 2017, 10:08