<![CDATA[Generic CSS question when target is several layers down]]>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

]]>https://forum.magicmirror.builders/topic/15428/generic-css-question-when-target-is-several-layers-downRSS for NodeSat, 16 May 2026 17:12:40 GMTSat, 28 Aug 2021 19:29:35 GMT60<![CDATA[Reply to Generic CSS question when target is several layers down on Sun, 29 Aug 2021 15:49:59 GMT]]>@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…

]]>https://forum.magicmirror.builders/post/94047https://forum.magicmirror.builders/post/94047Sun, 29 Aug 2021 15:49:59 GMT<![CDATA[Reply to Generic CSS question when target is several layers down on Sun, 29 Aug 2021 12:02:01 GMT]]>@hango because he has multiple instances of calendar running, he needs to use the ID

#module_1_calendar
instead of the class
,calendar

]]>https://forum.magicmirror.builders/post/94013https://forum.magicmirror.builders/post/94013Sun, 29 Aug 2021 12:02:01 GMT<![CDATA[Reply to Generic CSS question when target is several layers down on Sat, 28 Aug 2021 20:08:00 GMT]]>@ankonaskiff17 if u select an element in the center panel then it’s lieneage is shown on the bottom of that pane

]]>https://forum.magicmirror.builders/post/93992https://forum.magicmirror.builders/post/93992Sat, 28 Aug 2021 20:08:00 GMT<![CDATA[Reply to Generic CSS question when target is several layers down on Sat, 28 Aug 2021 20:06:30 GMT]]>@ankonaskiff17 on the spaces question, it’s like immediate child with no space

]]>https://forum.magicmirror.builders/post/93991https://forum.magicmirror.builders/post/93991Sat, 28 Aug 2021 20:06:30 GMT<![CDATA[Reply to Generic CSS question when target is several layers down on Sat, 28 Aug 2021 19:59:50 GMT]]>@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).

]]>https://forum.magicmirror.builders/post/93990https://forum.magicmirror.builders/post/93990Sat, 28 Aug 2021 19:59:50 GMT<![CDATA[Reply to Generic CSS question when target is several layers down on Sat, 28 Aug 2021 19:55:27 GMT]]>@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>
]]>https://forum.magicmirror.builders/post/93988https://forum.magicmirror.builders/post/93988Sat, 28 Aug 2021 19:55:27 GMT