Can a class affect a nested element?

Publishing help General
1

Hello,

I am building a messenger of sorts and would like to know if I can tag the top level div with a variety of classes. One of those is “online”. If I tag a div “online” I would like to have a div (which looks like a green dot) inside of the online div to be visible. Otherwise, I would like the green dot div inside the online div to be hidden from view.

Is this even possible? Should I be assigning the “online” class name directly to my green dot instead?

I cannot provide preview links for this project, but hopefully my words have been enough.

Edit, here’s a visual:

Best,
Christopher

2

Hi Christopher.

Just for vocabulary:

<div class=rectangle-badge>
  <div class=disc-avatar></div>
  <div class=name></div>
  <div class=dot></div>
  <div class=secondary-text>
</div>

The rectangle badge div is the parent, the other divs are its children. The children divs are all siblings to each other.

So, properties are inherited from the parents to the children, as long s those properties aren’t set directly on the children. You can even set properties that aren’t relevant to an element, just for those properties to be inherited by the children. Example, you can set a text color on the rectangle badge parent even if it’s not a textual element. This property will affect the children.

So your goal can be reached if you find a way for the “online” class to draw a green dot in a child element, without drawing it in the parent div itself. If the green dot is a round corner dic, the green would be the bg color, but if you set the bg color on the rectangle badge parent… well you know what happens. Same thing if you use a bg image, it will also appear on the parent.

So… the dot could be text. You can use a unicode disc character : ⬤ Yes that’s a character, you can alter its size and color in the typography panel (copy and paste the character).

So, let’s try it.

Here’s your structure:

http://vincent.polenordstudio.fr/snap/df6f0.jpg

The title name text and the secondary text have a color defined so they won’t inherit from anything. On the parent div (rectangle badge) the text color is set as light gray so that the dot appears gray (offline).

http://vincent.polenordstudio.fr/snap/akepv.jpg

Now if we add an online class to the parent and set the text color to green, the dot should inherit and color itself green:

917×483 1.4 MB

So, here it worked because we found a way to make it work. Sometimes the structure doesn’t allow it and you have to rework it, or move your subclass to a lower element. But your workflow is good: always try to alter upper elements.

3

Vincent thank you for taking the time that you have to lay this out so clearly for me. It is extremely clear and I understand the implementation very well now after taking some time with what you have presented me and practiced on my website a bit.

I have one question for you - rather than altering the text color of my dot, is there any way to alter the visibility instead? If not, I totally understand (based on what I have learned from your clear explanation).

Here is another visual depicting the ultimate goal for offline users (note the visible green dot vs no-dot):

Edit: I will note that by manually disabling the visibility of the dot, I have built my sub-text that you see in such a way that it automatically left aligns with the name. So simply by toggling visibility of the dot, the layout adjusts automatically how I intend. I just don’t know how to affect this dot’s visibility (if that is possible other than dropping transparency to 0… which does not result in the automatic adjustment of the subtitle as beautifully pictured above).

Thanks so much - I hope this benefits other people as much as it has benefitted me.
Christopher

1 Like
4

I think this is wishful thinking. I am trying things and it’s not going to work I don’t think, unfortunately.

Edit: I might have a breakthrough here by using an on-load interaction that affects “other elements” aka the dot to appear for this specific “online” class type. Do you smell what I’m stepping in?

5

Ha! I did it! It was simple with the Interactions. Here’s how I did it.

I tagged the rectangle badge div with a class “online” for online users. Otherwise I did not assign any additional classes to the div.

I then set the Display Settings of all green dots to be “None” by default.

Finally, I went and created an Interaction for all “online” class divs that is triggered “On load” and affects nested elements with class name “dot” (the dot). I told it to make the dot’s Display Settings to Block.

Sure enough, on load of the page the green dots appear strictly next to the users that are online as a result of the parent div holding the online class status.

Thanks for your help.
Christopher

6

Yes but you’ll understand that you can’t do that on another element… only the dot element. If you apply a hide property on a parent element, it will make everything disappear.

So you can still use the very same technique I showed you and use the opacity of the color, that way the dot will disappear (or make it white)

7

Oh, yes, with interactions, everything is possible. I didn’t even mention it because I thought you’d work with a system that can only add a class, and I’m very used to those procedures… so that exercise of finding the best way to make something morph into another thing is a real game :smiley:

Glad you found your way to Rome though :smiley:

8

This topic was automatically closed after 60 days. New replies are no longer allowed.