Generic CSS question when target is several layers down

ankonaskiff17

How does one address what appears to be an attribute amenable to custom CSS tweaking when the item is several layers down as shown in attached picture? I figure it has to do with the crude example I sketched out below but not sure what is driver for when you insert spaces, or don’t.
I see CSS that is
.X.Y.Z {
padding-left: 20px;
}
While other times it may be

.X.Y .Z {
padding-left: 20px;
}
Generic CSS.jpg

sdetweil

@ankonaskiff17 you have to chain together different selectors to target the element you want

see
https://www.w3schools.com/cssref/css_selectors.asp

is id, module_1_calendar

. is class , .module, .small
neither is element name , aka div, img, li

and there are operators that give u parent or child or direct child

u currently cannot target an element with a specific value

<li>2</li>

mumblebaj

@ankonaskiff17 Not an expert in CSS at all but in the first example you gave you are targeting a single element in the chain (.X.Y.Z single element Z in the chain of X/Y) whereas in the second example you are targeting two different elements (.X.Y and .Z).

sdetweil

@ankonaskiff17 on the spaces question, it’s like immediate child with no space

sdetweil

@ankonaskiff17 if u select an element in the center panel then it’s lieneage is shown on the bottom of that pane

hango

@ankonaskiff17 as I see in the image posted by you it is about the calendar table, you can use this css:

.calendar table tr:nth-child(1) td:nth-child(1) {}

to target the first cell (td) in the first row (tr)

.calendar table tr:nth-child(2) td:nth-child(1) {}

to target the first cell (td) in the second row (tr)

.calendar table tr:nth-child(1) td:nth-child(2) {}

to target the second cell (td) in the first row (tr) and so on or

.calendar table tr:nth-child(1) {}

to target the whole first row (tr)

sdetweil

@hango because he has multiple instances of calendar running, he needs to use the ID

#module_1_calendar
instead of the class
,calendar

hango

@sdetweil or he can add classes in config

{
   module: "calendar",
   position: "top_left",
   classes: "calendar1",
},
{
   module: "calendar",
   position: "top_left",
   classes: "calendar2",
}

if he put something between clock and calendar or change position the ID is changing

sdetweil

@hango said in Generic CSS question when target is several layers down:

if he put something between clock and calendar or change position the ID is changing

good point… I hadn’t thought of classes for that kind of purpose…