How selectors (classes?) work

Design help General
1

So I’m having hard time figuring this out. I have created a symbol with fullwidth image with class ‘placeholder’ placed in a section element. Now I want to place three instances of this symbol into the page. When I do that, they are duplicated, so when I change an image, all change, which is fine since they all have the same classes.

When I add a class ‘image2’ to second image, i’m able to upload second image without the first one getting duplicated. But then when I add a third image and add class ‘image3’ to the third image, the second image also changes its class to ‘image3’.

What’s the proper naming here, so I can use symbols and still quickly add new images into pre-prepared sections? Am I misunderstanding some principles?

EDIT: Hmm, do i have to unlink symbols before doing any modifications? I’m pretty sure I do now.

2

Add read-only link. It should work fine (Like regular CSS)

Maybe you rename image2 to image3 (Add extra class “image3”)

.fullwidth{
  width: 100%;
}
.fullwidth.red{
   color: red;
}
.fullwidth.blue{
   color: blue;
}
.fullwidth.orange{
   color: orange;
}

By CSS/HTML

https://stackoverflow.com/questions/5482677/how-to-apply-two-css-classes-to-a-single-div-span