0

I have a paragraph and inside the p an iframe

p > iframe {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
} 

iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

How to select the iframe parent (ONLY that p) in css - without javascript

The method above p > iframe doesn`t work. I want to add different style to paragraph and iframe.

calin24
  • 497
  • 9
  • 26
  • You don't. It's not possible to apply rules on elements based on complex content (only some basic `:empty`, etc, pseudoselectors). – Dinei Aug 07 '17 at 18:24
  • Oh, I misread your question. If you want to apply a CSS rule on the parent `p` you can put simply `p { ... }`. It's not possible, however, to apply this rule only if the p has an iframe within it. – Dinei Aug 07 '17 at 18:26
  • Try using classes. Give iframe `class="my-frame"` and with CSS, `p .my-iframe`. Check in developer console if the style is applied. I would use `
    ` around iframe for setting height/width, and iframe to fill the div.
     – Dmitriy Kravchuk Aug 07 '17 at 18:34
  • @DmitriyKravchuk the video is inserted by the user using summernote plugin and the iframe is inserted in a p element. The content is then grab from DB into the view - that`s why i need a css to custom the view – calin24 Aug 07 '17 at 18:42
  • CSS 3 does not currently support parent selection. Unfortunately. – sn3ll Aug 07 '17 at 19:00
  • let's say if i want to use JQuery `$("iframe").parent().addClass('iframe_p');` is not working eather ( where iframe_p class is the p > iframe) – calin24 Aug 07 '17 at 19:10

1 Answers1

0

Style the p element in itself and then the iframe with what you want differently.

Your notation p > iframe is calling upon all iframes that are within a p. So in the example the impact of iframe is the same as for p > iframe.

Happysmithers
  • 603
  • 6
  • 13