Tutorial on instances and targeting states?

This may be a stupid question but i’m still learning.

I’ve watched the ‘Instances’ video in the Divhunt Academy and on Youtube several times. But I was wondering if there is any tutorial or video that goes deeper and is more specific.

I’m having trouble figuring out how to use the custom editor to create certain instances or using it for certain states or creating my own custom ones.

Is there a certain way I have to write things in the editor because I see that its using “self.”

Maybe I’m not explaining this quite well but I’m hoping someone can help.

Thanks

Can you please give some more specific Informations what you want to achieve ? Give some examples and screenshots.

I want to learn how to target specific actions or states. But, whenever I try to learn, the examples I come across are usually in standard CSS or something. Like trying to create this hamburger:

.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }
.hamburger.is-active:hover {
opacity: 0.7; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000; }

Or something like this:
.main-menu:target .menu-close {
z-index: 1001;
}

.main-menu:target ul {
position: relative;
z-index: 1000;
}

.main-menu:target + .backdrop {
position: fixed;
display: block;
left: 0;
top: 0;
}

I often run into problems because I’m new to programming and trying to learn. I watch videos and read tutorials, but when I try to implement what I’ve learned in Divhunt, I struggle to figure out how to do it.

I don’t want to sound like I’m complaining or blaming Divhunt. It’s just that learning HTML, CSS, and JavaScript is already tough, and figuring out how to apply that in Divhunt without any tutorials or guides is even harder. I hope I’m explaining this clearly!

Thanks for replying!

I would suggest you to use predefined ready tu used elements at this point.

Why to make by yourself something that already existing and is fully functional?

When you chose an element such as nav bar and change the size of the screen you can take a look how the hamburger menu is created. Most of options you provided are on the right site of the screen menu.

I used predefined elements (actions or wireframes) for some of them you need to instal plugins

Yeah, those are a great starting point for basic things. But why wouldn’t I want to learn and create my own instead of using what everyone else is already using?

All the information you mentioned are available on the right site of the screen when you double click you component

image

Yes, i know where it is. The question I’m asking is whether there is a tutorial or any documentation that goes further into how to target certain instances or more advanced custom states. I know there’s a basic video showing the basics but is there anything where I can learn more about how to use I guess more advanced instances or custom states inside Divhunt?

Here you go: Loom Message - 25 August 2024 | Loom

Hope it helps

Yes that’s exactly what i was looking for! Thank you.

I kept trying to figure out why I couldn’t get things to work.

So, then we have to put :dh-active instead of just :active correct?

And we can basically write everything just like normal CSS but by using the “self” keyword instead of the tag or class name?

Also, I saw that you were using “>”. Is that a way to target other things in the custom CSS panel?

In divhunt we use class “dh-active” for some things. For example active links will get this class, some plugins add these class to active elemens such as tabs and similar.

So you should not use pseudo ‘:dh-active’, you use class ‘.dh-active’.

Yes, you can write everything normal, just like in css, you use self keyword.

You are just not able to merge properties like:

self h1, self h2, self h3 { font-weight:600 }

You need to seperate them like:

self h1 { font-weight:600 }
self h2 { font-weight:600 }
self h2 { font-weight:600 }

In CSS using > is targeting only first layers of children.
Here’s an explanation from gpt:

got it. Okay thank you.