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

WHIZZBBIGOP•2y ago

its been quite hours but now i wave my white flag and came for the help hope i get a solution 🙂

Joao•2y ago

You can use the :last-childselector

WHIZZBBIGOP•2y ago

brother how should i select the 2nd panel even to get to that point

Joao•2y ago

.header_main-panel ?

WHIZZBBIGOP•2y ago

can you read comments?

Joao•2y ago

Yes, I can. I would suggest you change the names because you can't possibly have two main panels.

WHIZZBBIGOP•2y ago

nope there is only one main-panel in each panels please see the code again

Jochem•2y ago

.header_main-panel :last-child should work?

Joao•2y ago

So whats' the content inside teh ~~secoind~~ last header_panel?

WebMechanic•2y ago

the </ul lacks its closing > which would mess up the DOM structure.

WHIZZBBIGOP•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•2y ago

.header_main-panel :last-child should work?

Joao•2y ago

.header_main-panel .header_main-panel-item:last-child does this work?

WHIZZBBIGOP•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•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

WHIZZBBIGOP•2y ago

it still not supported?

Jochem•2y ago

.header_panel:nth-of-type(2) .header_main-panel :last-child maybe?

Joao•2y ago

.header_main-panel .header_main-panel-item:last-child have you tried this?

WHIZZBBIGOP•2y ago

yup i'll try this now

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•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

WHIZZBBIGOP•2y ago

its a content gettig fetched from Headless CMS 🤓

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.

WHIZZBBIGOP•2y ago

in these cases flexing css skills is mandatory because not have any choice

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)

WHIZZBBIGOP•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•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•2y ago

nth-of-type will look at the element, not at the class

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

WHIZZBBIGOP•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•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•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

WHIZZBBIGOP•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•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?

WHIZZBBIGOP•2y ago

absolutely 😆

Gaming

Programming

Selectors Hell