How to select the iframe elements using css?

css iframe css-selectors

13,095

Solution 1

You should be able to reference them by their id's, like:

#widget-2 { display: none }

If you want this to be depended of the page you are currently in, you might want to add a class to the body element that indicates the page. With that, you can enable/disable the iframes the way you want:

<body class="home">
.home #widget-2 { display: none }

In the example above, now the second widget is only disabled on the homepage.

Solution 2

First add body class in home and inner ( like "home-page" "inner-page" )

 iframe { display: none }

 .home-page iframe#widget-0, .home iframe#widget-0 { display:block }

 .inner-page iframe#widget-1, .home iframe#widget-3 { display:block }

13,095

Author by

John Peter

I'm John Salamon Peter, a forward thinking, highly motivated developer from Oneindia Private Limited in Bangalore. I make my living developing for the web. What do I know? I am skilled in HTML/CSS authoring, PHP,Wordpress,Genesis,Symfony,Magento,Smarty and Joomla,Web Scrapping, Google Webmaster Tools. What to do now Take the first step towards your new project and contact me. Buzz me an email and I'll either email or call you straight back. What I can do for you I'm happy to work alone or as part of a team to find the perfect solution to your project. I listen to your needs and then solve them. We can work together on website designs, application development, e-commerce solutions, print design or any other custom requests.

Updated on June 04, 2022

Comments

John Peter almost 2 years
I have few div's like as follows,
```
<div id="text-2">
<div class="textwidget">
<iframe id="widget-0" src=""></iframe>
<iframe id="widget-1" src=""></iframe>
</div>
</div>

<div id="text-3">
<div class="textwidget">
<iframe id="widget-2" src=""></iframe>
<iframe id="widget-3" src=""></iframe>
</div>
</div>
```
In the above div's, i want to restrict(block/none) the iframes for particular page using css.

For Example :

(i). If i'm in home page,

I want to display the iframes like "widget-0" and "widget-2",and the remaining iframes "widget-1" and "widget-3" needs to be disabled.

(ii). If i'm in inner page,

I want to display the iframes like "widget-1" and "widget-3",and the remaining iframes "widget-0" and "widget-2" needs to be disabled.

How to do this using css. Can anyone help me in this small css tweaks.

CSS Selector Example For Paragraph tag :
```
div#test p:first-child {text-decoration: underline;}
div#test p:last-child {color: red;}
```
Note :

The iframe id's are dynamic, not static. Above one is simple example.
John Peter almost 11 years

The widget id's are dynamic, i just given the example like that. If i want to hide the last element and display the first element means, what should i do using css selector for iframe.
Bas Slagter almost 11 years

Can't you use: iframe:first-child or iframe:nth-child ?
John Peter almost 11 years

yeah, it's not applying that styles