reference a custom class within another custom class

Hi Rikard,

Apologies, i just read it back and it does sound very confusing! Because i’m am new to all this, my coding terminology is likely to be incorrect – but will try and explain it better:

I need to duplicate multiple coloursections. Inside each of these coloursections I have an image and/or text box. These contents will require a custom class to allow me to make the position absolute, and individually translate each one horizontally and vertically.

I was hoping to keep the custom classes the same for each image and textbox (for ease of duplication and css code) Therefore was hoping there is a way to differentiate each image and textbox by referencing it’s parent coloursection ID followed by the textbox class or image class.

Similar to how you can separate an element by listing a page-id first:
.home .custom_image_class {top: 100px;}

I was wandering if it is possible to separate a custom class by its parents section id. something like: #coloursection01ID .custom_image_class {top: 100px;}
or maybe using another custom class for the coloursections: .coloursection01class .custom_image_class {top: 100px;}

Hopefully that makes sense?

Thanks for getting back so quickly, but not sure that’s answered my question. I know how to apply custom classes, but when inputting the code to style the elements in the quick css field, i don’t know how to reference a custom class (that has multiple elements assigned the same class) but only within a particular coloursection.

#coloursection01ID .custom_image_class {top: 100px;}

Assuming it is possible, the above code is missing something between the coloursection (id or class) and the image class,
such as .container or .contents or .avia-element?

I was hoping you may have the answer, so that i could apply some code to all the images via it’s custom class but also apply some additional code that only affects those images within a certain coloursection.

Appreciate the help Vinay, but my coding skills are not good enough to decipher all the additional code that is surrounding the element when viewed using the developer tools. Long story short, i read the following link:

https://stackoverflow.com/questions/25796180/targeting-a-class-when-inside-another-class

And therefore believed it would be possible to target my image element’s custom class by first referencing my colour section custom class. EG:

.coloursectioncustomclass .imagecustomclass {…}

But because this didn’t not work, i have decided to create a new custom class for each image in each colour section. It does mean that a lot of my css is repeated, EG:

.imagecustomclass01 {…}
.imagecustomclass02 {…}
.imagecustomclass03{…}

But at least i know it works.

Thanks mike, helpful tip although unfortunately it doesn’t really help me with this situation. I was really hoping to avoid .imageclass01, .imageclass02, .imageclass03 e.t.c and instead have:

.coloursectionclass01.imageclass
.coloursectionclass02.imageclass
.coloursectionclass03.imageclass
e.t.c

Unless you can use truncating when referencing classes?
eg: .imageclass*,
which would target all classes that begin with “.imageclass”, so any future added classes such as “imageclass04” would automatically receive the assigned parameters – But i’m guessing that is wishful thinking?

Thanks Mike, I really appreciate the extra time taken to look through the site. However, before I re-write the code to how i would like it, could you confirm whether targeting a custom class through it’s parents custom class is even possible? eg:

.coloursectionclass01.imageclass {margin-left: -145px !important;}
.coloursectionclass02.imageclass {margin-left: 15px !important;}
.coloursectionclass03.imageclass {margin-right: 100px !important;}
e.t.c

If this is not a possibility, then I am happy to give every colour section and image is own unique class – I just wanted to know if i was missing something before I begin creating lots of individual classes and increasing my workload?

Thanks again,

Excellent, i will re-write the code and let you know if i have any problems….

Another question i had was; should it work if I was to use a section id instead of a custom class?

eg:

#coloursectionid01 .imageclass {margin-left: -145px !important;}
#coloursectionid02 .imageclass {margin-left: 15px !important;}
#coloursectionid03 .imageclass {margin-right: 100px !important;}

Thanks,

Thanks again Mike,
I will re-write the code using section ID’s – as there shouldn’t be any duplicates on the same page.
I will let you know if i have any problems…