How Do I Target All iframes Within A Certain Parent div?

How should I target all <iframe> tags within a certain parent <div> tag. Say this <div> tag has a class of coolClass.

From a quick thought, I think this should work (CSS):

.coolClass *:is(iframe) {
    /* Styles here */
}
3 Likes

Can’t you just do

.coolClass > iframe {
  /* ... */
}
1 Like

Probably. I just know that the first one works from messing with CSS for the last 2 days.

1 Like

Why yall using operators like > or *:
Ins’t just

.coolClass iframe {
    /* my styles */
}
1 Like

Because > makes me think “oh this is supposed to only affect children” whereas that makes me think “ok so that will effect iframes with the coolClass class”

2 Likes

Won’t this excludes <iframe> tags nested deeper than one level?

1 Like

seems like that’s what red wants to me

1 Like

That’s what I want, yeah.

Which would work better?

AFAIK, they’re functionally the same, so pick whichever you prefer I suppose.

Would this target the <iframe> even it does not have the coolClass class?

Yes. Because <iframe> is a descendant of an element with the class coolClass.

2 Likes

Yes, That selector can be broken apart like this:

.coolClass /* Target elements with "coolClass" */
:is(iframe) /* Target sub-elements of those elements, where the elements are "iframe"s */ {
    /* Apply styles here */
}
1 Like

Simple:

div.coolClass iframe {
    /* your styles */
}

will select all iframes inside of any div with class coolClass. Even if they’re layered, e.g.

<div class="coolClass">
    <div class="contents">
        <iframe></iframe> <!-- this will be selected -->
    </div>
</div>

If you only want to select iframes that are direct children, like directly under the div, then, it’s just a matter of adding a > in between the two things.

div.coolClass > iframe {
    /* your styles */
}
2 Likes

Firepup’s seems more finnicky in my opinion. I think the simplest way that also makes most sense at a glance is .coolClass > iframe because > in CSS means direct children and as long as you know that then it reads

1 Like

that’s what I said and then you :question:ed me :woman_facepalming:

2 Likes

Because it doesn’t affect iframes with coolClass class. It affects iframes that are in any way inside of any elements with the class coolClass.

2 Likes

huh… well that’s confusing imo lol, good to know though

2 Likes