Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Target element by specific page URL

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 23, 2015 at 8:52 pm #196654
    mcfly85
    Participant

    Hi.

    I can’t find a clear answer for this:

    Can I style an element by its URL?

    E.g.

    <style>
    [data-url-id=name-of-page] h1 {
    color: Tomato !important;
    }
    </style>

    I work lots with a template driven platform (Squarespace) where it is a pain to style an element in a specific way on a specific page, being able to target by URL would be a life-saver. But the above isn’t working.

    Any thoughts appreciated…

    February 24, 2015 at 3:24 am #196662
    Paulie_D
    Member

    Not really (AFAIK) the URL isn’t part of the DOM so there’s no element to be selected by the CSS.

    Does SquareSpace give each page a unique class or ID? Then you could do it.

    February 24, 2015 at 3:36 pm #196705
    mcfly85
    Participant

    Hey.

    Bummer. I thought that might be the case. Squarespace kind of sucks as they give elements weird IDs (like: id=”yui_3_17_2_3_1424765035111_2446″) that you can’t use because they change. But I’ll have a poke around and see if there’s a class or page ID I can specify that doesn’t change.

    Thanks.

    February 24, 2015 at 4:51 pm #196710
    mcfly85
    Participant

    Yeah I’m 99.9% certain those “#yui_big_long_number” IDs are dynamic or something. They aren’t reliable.

    February 24, 2015 at 4:58 pm #196711
    mcfly85
    Participant

    For any other sad bastards like me who are trying to target specific elements in a Squarespace template (elements you have NOT necessarily created yourself) I believe it’s best to target specific elements with their #collection ID coming first. Each page <body> in Squarespace gets given its own #collection ID.

    E.g.

    &lt;style&gt;
    #collection-54c80d1de1b051522508c579 .page-title {
    color: Tomato;
    }
    &lt;/style&gt;

    This means you can style the page title (or whatever) in a unique way on a per-page basis. I hope this helps someone sometime…

    November 6, 2016 at 3:04 am #247523
    skye
    Participant

    I was able to style an element using its Data Url in Squarespace using:

    <style>

    [data-url-id=”intro”] .page-desc p{
    color: Tomato;
    }

    </style>

    Thanks for your last post also, the #collection ID worked great too.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.