We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

CSS how to change a nested class

Home › Forums › Puzzles › CSS how to change a nested class

Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • 2023-08-30 at 9:10 am #66464
    huib
    Customer

    Hey!
    I want to change the class assigned to the a href, inside the list item.
    In the example this is class “nav-link”

    Changing the class of the list item list-item-menu works by using the set prop puzzle.
    But how do you change the class when its one level deeper, like in this case the class of the a href doesn’t have an id on its own, so how do access it and change the class name?

    <li id="fase_01" class="list-item-menu">
                <a href="#" class="nav-link">Fase 1</a>
</li>
    • This topic was modified 8 months ago by huib.
    2023-08-30 at 10:55 am #66469
    kdv
    Participant

    Use query selector to find an element by its class name

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

    2023-08-30 at 11:23 am #66475
    huib
    Customer

    Thanks for the reply I don’t really understand how to implement this.

    Lets say in the example above I want to change the nav-link class.
    What puzzles would I use. Query Selector on its own would return the first result with that class name but I need only the one inside the one with id “fase_01” in this example

    2023-08-30 at 11:25 am #66476
    kdv
    Participant

    #fase_01 > .nav-link

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

    2023-08-30 at 11:53 am #66478
    huib
    Customer

    Ah got it thank you! :good:

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.