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
> <[email protected]> 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 [[email protected]]
> 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 [[email protected]]
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/
