Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at
Changing your Avatar.
The only way to currently change a forum avatar is through The email address used for your account must be one of the email addresses that is registered to your Gravatar account.

Edit element with variable/Dynamic class

I'm trying to edit a site but i can't change some elements because their class name change everytime, I want to know if it is possible and how to do it... Example:

"#page > div > div:nth-child(2) > div.firstitem_XXX > div:nth-child(3) > div.seconditem_YYY > div" {}

where XXX always changes when the page opens and YYY changes after a button is clicked , both are a combination of letters and numbers (eg: "8Yj3").

I'm asking here because I'm a noob and don't know what to search for. Any help is appreciated :)
Sorry for the dumb question


  • edited December 2017 Chrome
    One of the only reasons to chain selectors like that is to be specific, without having to be so specific in terms of actual classes which may be inconsistent. Since the order is so specific, you may be able to lose the classes:

    #page > div > div:nth-child(2) > div > div:nth-child(3) > div > div

    If you wanna be slightly more specific, and classes have any consistent characters like underscores, maybe you could use:

    #page > div > div:nth-child(2) > div[class*="_"] > div:nth-child(3) > div[class*="_"] > div

    These types of chained selectors can sometimes be fragile though. All depends on the site. Any little changes in the layout from page to page can break the order. Some sites are consistent throughout, or on pages where the order is broken, it may be because the code isn't relevant for those pages anyway.

    There are too many variables to say with any certainty what the best way to go about it would be. We'd really need to see the code and which elements you're looking to change in particular.
  • edited December 2017 Firefox

    You can achieve what you want by using the attribute selector.
    #page > div > div:nth-child(2) > div[class^="firstitem_"] > div:nth-child(3) > div[class^="seconditem_"] > div { }

    Either way, that's a pretty long selector.
    Check if div[class^="seconditem_"] > div { } may be sufficient.

  • Thank You! your answers were very useful.
Sign In or Register to comment.