Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 7, 2022 at 2:32 am #1343414
    BrendaSarg

    Hi there!

    I found this:
    /* Icon before title */

    .av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-title:before {
    content:”\e8c0″;
    font-family: ‘entypo-fontello’;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    }

    .av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-title {
    padding-left: 30px;
    }

    in the documentation and it totally worked great. However, I’m using the icon to demonstrate which menu items are vegetarian so want the icon only on specific menu items.

    Can you tell me how to assign them per item? For instance, under Burritos, I just want the first menu item to have the leaf, not all the menu items listed on top.

    March 7, 2022 at 2:34 am #1343415
    BrendaSarg
    This reply has been marked as private.
    March 7, 2022 at 5:21 am #1343434
    Ismael

    Hi,

    Thank you for the inquiry.

    You can use the nth-child selector to target a specific item in the list.

    Example:

    .av-catalogue-container.my-custom-catalogue .av-catalogue-list li:nth-child(1) .av-catalogue-title:before {
    color: red;
}

    As you may noticed we used the nth-child(1) selector, which should target the first item in the list. For more info about child selectors, please check this article.

    // https://css-tricks.com/almanac/selectors/n/nth-child/
    // https://css-tricks.com/useful-nth-child-recipies/

    Best regards,
    Ismael

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