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
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
its been quite hours but now i wave my white flag and came for the help hope i get a solution 🙂
You can use the
:last-child
selectorbrother how should i select the 2nd panel even
to get to that point
.header_main-panel
?can you read comments?
Yes, I can.
I would suggest you change the names because you can't possibly have two main panels.
nope there is only one main-panel in each panels please see the code
again
.header_main-panel :last-child
should work?So whats' the content inside teh secoind last header_panel?
the
</ul
lacks its closing >
which would mess up the DOM structure.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
.header_main-panel :last-child
should work?.header_main-panel .header_main-panel-item:last-child
does this work?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 🙂
.header_panel + .header_panel > ul > :last-child
or you wait for all browsers to support
:nth-child(2 of .header_panel) > ul > :last-child
it still not supported?
.header_panel:nth-of-type(2) .header_main-panel :last-child
maybe?.header_main-panel .header_main-panel-item:last-child
have you tried this?yup
i'll try this now
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
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
its a content gettig fetched from Headless CMS 🤓
.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.in these cases flexing css skills is mandatory because not have any choice
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)
but what if i am trying to access the 2nd panel
should it be went like this?
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.nth-of-type will look at the element, not at the class
I'd suggest to go the
:nth-child()
or sibling selector route as ugly as they may look 🙂
or :nth-last-child()
fwiwso 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
still think this works -- the markup's really hellish 😄
.header_panel + .header_panel > :first-child > :last-child
=> the last LI in that UL.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 thatlike 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
.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?absolutely 😆