CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Shanmuganathan Shanshayan
Shanmuganathan Shanshayan

Reputation: 69

How to add different css to one html tag?

I'm using two iframe tag in my website. I added css for 1 tag 

<style>
iframe{
    opacity: 0;
    border: 0px none transparent;
    position: absolute;
    top: 300px;
    left: 200px;
    height: 300px;
    width: 250px;
    filter:alpha(opacity=0);
}
</style>

But both iframes are hidden.

I want to show 1 iframe and hide another one. How can I do that?

Upvotes: 0

Views: 74

Answers (4)

Y2H
Y2H

Reputation: 2537

The best way is to give the one you wish to hide an id or a class and then let the css be applied to the id (#your_id) or the class (.your_class). So instead of writing iframe{.... you would write #your_id{... or .your_class{....

Upvotes: 0

KoemsieLy
KoemsieLy

Reputation: 722

You should add ID or Class in your <iframe> tag like below code:

Add ID:

 <iframe id="iframe-1"></iframe>
 <iframe id="iframe-2"></iframe>

or

Add Class:

<iframe class="iframe-1"></iframe>
<iframe class="iframe-2"></iframe>

Below CSS:

<style>
     #iframe-1,
    .iframe-1 {
          /* Your code here */
    }
     #iframe-2,
    .iframe-2 {
          /* Your code here */
    }
</style>

Upvotes: 0

Nemery
Nemery

Reputation: 399

You can use IDs for this if you have a simple page and don't have too many styles to maintain. Below the style tags are the iframes with ID attributes defined. Those ID attributes are used between the style tags to select the iframe element you want to style by ID.

<style>
  /* Using ID selector #iframeOne */
  #iframeOne {
    opacity: 0;
    border: 0px none transparent;
    position: absolute;
    top: 300px;
    left: 200px;
    height: 300px;
    width: 250px;
    filter:alpha(opacity=0);
  }
</style>

<!-- Give ID to iframe you want to style. Here it's iframeOne -->
<iframe id="iframeOne"></iframe>

<iframe id="iframeTwo"></iframe>

Upvotes: 1

LVDM
LVDM

Reputation: 454

Try these selectors:

iframe:first-child{
 // styling
}

iframe:last-child{
 // styling
}
iframe:nth-child(1){
 // styling
}

Upvotes: 0

Related Questions