Welcome to WebmasterWorld Guest from 3.81.29.226

Forum Moderators: not2easy

Select styles depending of the width of the "parent container"

     
6:07 pm on Oct 11, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Aug 30, 2019
posts:145
votes: 28


Hello-

Thanks to media query, you can control which style applies depending of the size of the device's screen, but, I was wondering if there is a "trick", to select different styles for a div, based on the size of its "parent container" ?
6:56 pm on Oct 11, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15934
votes: 887


How complicated do you want to get? You might be able to do something with calc(). I assume you don't want to mess with scripting, which has pretty much infinite possibilities--but which would break if a user had scripting turned off. It all depends on what aspect of the style you want to change.

Isn't the width of the parent container ultimately determined by viewport width? If so, you can do the whole thing within the same @media rule.
9:09 pm on Oct 11, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Aug 30, 2019
posts:145
votes: 28


Hello-

Thank you for your answer.

The situation is that, on the pages of one of my site, "sometimes", there is a an image which is floated to the right of the text. So, paragraphs, which are immediately next to the image, are less wide, this is fine as long as this is text, but, sometimes, instead of text, I have a table, and sometimes the space remaining next to the image, is too narrow for the table. So I was trying to see if I can apply a different style to this table, when the space is narrow. So far, I am using PHP to set a particular class, when I know the table will be next to the image, but I 'd like something more universal. But this is certainly trying to make something too complex.
1:36 am on Oct 12, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15934
votes: 887


using PHP to set a particular class, when I know the table will be next to the image
Is it possible to do something like
img.classname + table.classname {styles blahblah}
? Only feasible, of course, if the table comes immediately after the image in your html. The + construction, if you're not familiar with it, applies styles to the table (the part after the +) if-and-only-if it comes immediately after the image (the part before the +).

:: looking vaguely around for not2easy, because I can't remember what happens if you say something like
img.classname + div.classname table.classname {styles blahblah}
where it's the div that comes immediately after the floated image, and then the table is anywhere inside it ::
2:55 am on Oct 12, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


Sorry, I have used something similar to the "img.classname + div.classname" part but not with the addition (with or without a second +) of a "table.classname" - or anything further. So I can only suggest trial + validation for that. :(
7:54 am on Oct 12, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Aug 30, 2019
posts:145
votes: 28


Hello-

Thanks for your remarks! I'll check on this.