I might muddy the waters here, but I'll try to explain how I interpreted
the goal. Consider a use-case in which your page has a long list of
anchors (imagine a sticky sidebar which scrolls with the user). The goal
(in my contrived scenario) would be to gray out the anchor which links to
the targeted element.
Instead of styling each anchor in the sidebar with it's own rule e.g.
a[href="target1"] {}
a[href="target2"] {}
I think the question is, can you do something like this:
a[href=:target] { color: lightgray; }
Then you only need 1 rule.
My apologies to OP if I am only creating noise :)!
On Fri, Aug 12, 2016 at 8:33 AM Tom Livingston <tom...@gmail.com> wrote:
> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers <k...@designdrumm.com>
> wrote:
> > 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
>
>
> If I am not mistaken, and for clarity, you would not include the '#'
> in the value of all the above examples.
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> ______________________________________________________________________
> 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/
