Selectors Hell

I am trying to select specific li of the ul of a div which is looking like a hell if they're simillar ones
<header class='header'>
<div class="inner">
<div class="buttons">
<button class="products"></button>
<button class="services"></button>
<button class="cool"></button>
<div class="header_panel"></div> <!-- has child main-panel-item of main-panel -->
<div class="header_panel">
<ul class="header_main-panel">
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li> <!-- the one i want to apply styles-->
</ul
</div>
<div class="header_panel"></div> <!-- has child main-panel-item of main-panel -->
</div>
</div>
</header>
<header class='header'>
<div class="inner">
<div class="buttons">
<button class="products"></button>
<button class="services"></button>
<button class="cool"></button>
<div class="header_panel"></div> <!-- has child main-panel-item of main-panel -->
<div class="header_panel">
<ul class="header_main-panel">
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li>
<li class="header_main-panel-item"></li> <!-- the one i want to apply styles-->
</ul
</div>
<div class="header_panel"></div> <!-- has child main-panel-item of main-panel -->
</div>
</div>
</header>
I am using SCSS how should i select it in a way to get access to the 6th child elment of main-panel-item of 2nd panel's main-panel hope this make sense 😆
35 Replies
WHIZZBBIG
WHIZZBBIG•2y ago
its been quite hours but now i wave my white flag and came for the help hope i get a solution 🙂
Joao
Joao•2y ago
You can use the :last-childselector
WHIZZBBIG
WHIZZBBIG•2y ago
brother how should i select the 2nd panel even to get to that point
Joao
Joao•2y ago
.header_main-panel ?
WHIZZBBIG
WHIZZBBIG•2y ago
can you read comments?
Joao
Joao•2y ago
Yes, I can. I would suggest you change the names because you can't possibly have two main panels.
WHIZZBBIG
WHIZZBBIG•2y ago
nope there is only one main-panel in each panels please see the code again
Jochem
Jochem•2y ago
.header_main-panel :last-child should work?
Joao
Joao•2y ago
So whats' the content inside teh secoind last header_panel?
WebMechanic
WebMechanic•2y ago
the </ul lacks its closing > which would mess up the DOM structure.
WHIZZBBIG
WHIZZBBIG•2y ago
how it can work i just want it to apply on the 2nd panels ignore it its an demo that i typed while creating a post the li which has the comment have to be applied by that style none of the other elements should affect with tht style
Jochem
Jochem•2y ago
.header_main-panel :last-child should work?
Joao
Joao•2y ago
.header_main-panel .header_main-panel-item:last-child does this work?
WHIZZBBIG
WHIZZBBIG•2y ago
brother it will work for sure but i only want it to be applied on the 2nd panel > main-panel > main-panel-item hope you understand now what i am trying to achieve here 🙂
WebMechanic
WebMechanic•2y ago
.header_panel + .header_panel > ul > :last-child or you wait for all browsers to support :nth-child(2 of .header_panel) > ul > :last-child
WHIZZBBIG
WHIZZBBIG•2y ago
it still not supported?
Jochem
Jochem•2y ago
.header_panel:nth-of-type(2) .header_main-panel :last-child maybe?
Joao
Joao•2y ago
.header_main-panel .header_main-panel-item:last-child have you tried this?
WHIZZBBIG
WHIZZBBIG•2y ago
yup i'll try this now
Jochem
Jochem•2y ago
tbh, if you so specifically want to target so specific an item, it's probably better to give it a class or id of its own like, cool selectors are cool and all, but readability is more important than flexing css skills
Joao
Joao•2y ago
Like I said, you can't possibly have two main panels... that code above should work, if you have that exact same class repeated it doesn't make sense to have it called main
WHIZZBBIG
WHIZZBBIG•2y ago
its a content gettig fetched from Headless CMS 🤓
WebMechanic
WebMechanic•2y ago
.header_panel:nth-of-type(2) would ignore the class part. that's what the "new" :nth-child(n of selector) is supposed to solve.
WHIZZBBIG
WHIZZBBIG•2y ago
in these cases flexing css skills is mandatory because not have any choice
Jochem
Jochem•2y ago
this is a valid and important point, it should still work in this particular case though (a point I hadn't considered yet btw, despite watching Kevin's video about it)
WHIZZBBIG
WHIZZBBIG•2y ago
but what if i am trying to access the 2nd panel
.panel {

&:nth-of-type(2) {}
}
.panel {

&:nth-of-type(2) {}
}
should it be went like this?
WebMechanic
WebMechanic•2y ago
in :nth-of-type(2) the "type" bit refers to the element name not the class. It's ignored, so it matches the 2nd DIV no matter its class name.
Jochem
Jochem•2y ago
nth-of-type will look at the element, not at the class
WebMechanic
WebMechanic•2y ago
I'd suggest to go the :nth-child() or sibling selector route as ugly as they may look 🙂 or :nth-last-child() fwiw
WHIZZBBIG
WHIZZBBIG•2y ago
so if go with this in panel it will be most probably be looking on the childs of panel but what if i want to only go in panel 2 and access the childs of that div only
WebMechanic
WebMechanic•2y ago
still think this works -- the markup's really hellish 😄 .header_panel + .header_panel > :first-child > :last-child => the last LI in that UL
Jochem
Jochem•2y ago
.panel:nth-of-type(2) would look at anything with the class panel, that is also the second element of that type (so div, p, whatever). the class selector and the nth-of-type are independent, and that :nth-child(2 of .panel) syntax that's coming soon would fix that
WHIZZBBIG
WHIZZBBIG•2y ago
like for example there three parents div named panel which has sub parent div named main-panel and consists several child elements named main-panel-item what should i do if i want to go with panel's 2 child elment main-panel-item this one is for explanation tho if you understand it you can ignore this 🙂 this is working bro i want to thank both of you @WebMechanic and @jochemm for helping me solving this bug which i was trying to figure out from 3 hours man really very appreciate your efforts man
WebMechanic
WebMechanic•2y ago
.panel:nth-child(2) would also do the trick for a .panel that is the 2nd child of its container and so on so can we have our cookies then?
WHIZZBBIG
WHIZZBBIG•2y ago
absolutely 😆
Want results from more Discord servers?
Add your server