Hi Andre,
Why would you target the element for its href if you already have an id?
Not sure I am understanding that part.

For checking the href, like Tom said.

a[href*='#foobar'] {
    color: red;
}

or if you know #foobar will always be at the end of the url you can use the $

a[href$='#foobar'] {
    color: red;
}

or if you wanted to color per website in the url

a[href^='http://example.com'] {
    color: red;
}

website url and hash (for those long blog urls =)

a[href^='http://example.com'][href$='#foobar'] {
    color: red;
}

Then there is checking both id and href

a#foobar[href*='#foobar'] {
    color: red;
}

if it's a link that could possibly be more than one on a page, then I would use 
classes not an id.

a.foobar[href*='#foobar'] {
    color: red;
}

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 11, 2016, at 10:46 AM, Andre Osku Schmidt 
> <andre.osku.schm...@gmail.com> wrote:
> 
> #Hello.World,
> 
> there seems to be no CSS pseudo-class that represents the element with an
> href matching the fragment identifier of the URI of the document. kinda
> like the source of :target [0].
> 
> For example with :target we can style the element that has id="#foobar"
> when the browser URL is http://example.com/page.html#foobar, with :source
> we could style the element that has href="#foobar".
> 
> I would like to easily style the link element in my table-of-content.
> 
> So before i implement this with javascript, i thought to ask here:
> 
> - Is there really no such pseudo-class?
> - Would this be technically impossible?
> - Has this been proposed before?
> - Any tips for proposing one? ;P
> 
> Cheers
> Andre Schmidt
> 
> [0] https://developer.mozilla.org/en-US/docs/Web/CSS/:target
> ______________________________________________________________________
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to