Re: [css-d] CSS pseudo-class for source of :target

[Andre "Osku" Schmidt]

On Sat, Aug 13, 2016 at 9:05 PM, Karl DeSaulniers 
wrote:

> Ok, I see. I was thinking navigation buttons.
> Your example seemed to work, but I got this error.
>
> SyntaxError: Unexpected identifier 'clsn'
>
> Dreamweaver also didn't like the "let" calls.
>

​sorry, the javascript code there uses couple new things, and i can only
test with current firefox and chromium/chrome (on linux)​.
​
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let
​
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals


But it worked as far as I can tell.
> The title and text changes per the links on the side.
>

​the important part is that the links on the left would have black
background for active :target.​ (eg. for active :source, if there was such
selector)

​Cheers
Andre Schmidt​
__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

Ok, I see. I was thinking navigation buttons.
Your example seemed to work, but I got this error.

SyntaxError: Unexpected identifier 'clsn'

Dreamweaver also didn't like the "let" calls.
But it worked as far as I can tell. 
The title and text changes per the links on the side.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com 




> On Aug 13, 2016, at 1:56 PM, Andre Osku Schmidt 
>  wrote:
> 
> On Sat, Aug 13, 2016 at 8:13 PM, Karl DeSaulniers  > wrote:
> Hi Andre,
> Couldn't let this one go.. :P
> Would this be what you are looking to accomplish?
> 
> http://designdrumm.com/example_target.html 
> 
> 
> ​my use case would be more like this:
> http://osku.de/post/css-target-source-example3.html#bar 
> 
> ​

__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Andre "Osku" Schmidt]

On Sat, Aug 13, 2016 at 8:13 PM, Karl DeSaulniers 
wrote:

> Hi Andre,
> Couldn't let this one go.. :P
> Would this be what you are looking to accomplish?
>
> http://designdrumm.com/example_target.html


​my use case would be more like this:
http://osku.de/post/css-target-source-example3.html#bar
​
__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

Hi Andre,
Couldn't let this one go.. :P
Would this be what you are looking to accomplish?

http://designdrumm.com/example_target.html

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 13, 2016, at 3:44 AM, Andre Osku Schmidt 
>  wrote:
> 
> On Fri, Aug 12, 2016 at 10:08 PM, Karl DeSaulniers 
> wrote:
> 
>> This might be worth taking a look at.
>> 
>> http://jsfiddle.net/SchizoDuckie/fzZ9d/
> 
> 
> ​
> ahh,
> 
> placing the link inside the :target,
> cool idea!​
> 
> Thanks
> Andre Schmidt
> __
> 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/

Re: [css-d] CSS pseudo-class for source of :target

[Andre "Osku" Schmidt]

On Fri, Aug 12, 2016 at 10:08 PM, Karl DeSaulniers 
wrote:

> This might be worth taking a look at.
>
> http://jsfiddle.net/SchizoDuckie/fzZ9d/


​
ahh,

placing the link inside the :target,
cool idea!​

Thanks
Andre Schmidt
__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

This might be worth taking a look at.

http://jsfiddle.net/SchizoDuckie/fzZ9d/

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 12, 2016, at 2:56 PM, Karl DeSaulniers  wrote:
> 
> Would this be what you're seeking?
> I think this is the closest you can come if not.
> 
> h1:target
> {
>background: green;
> }
> h1:not(:target)
> {
>background: red;
> }
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> 
>> On Aug 12, 2016, at 8:03 AM, Andre Osku Schmidt 
>>  wrote:
>> 
>> Sorry,
>> 
>> my first mail had an syntax error and was not clear enough, ill try again.
>> 
>> here is an example of :target
>> http://osku.de/post/css-target-source-example1.html
>> 
>> there we have a single css definition:
>> :target { background: green; }
>> 
>> so when we click a link (with eg. href="#foo") in the unordered list, you
>> can see the "active" target (with eg. id="foo") change and leave their
>> background to green. and all this with one css rule, pretty cool!
>> 
>> now, i'm trying to findout if there is a css pseudo-class that would be the
>> source of :target.
>> 
>> lets pretend the pseudo-class im looking for is called :source and i would
>> have css like this:
>> :source { background: red; }
>> 
>> here is an example what it would do ("polyfilled" with javascript but
>> apparently we cant just create our own pseudo-classes, so this example uses
>> .source instead of :source):
>> http://osku.de/post/css-target-source-example2.html
>> 
>> so when you click a link (with eg. href="#foo") in the unordered list, you
>> can see the "active" source (with eg. href="#foo") change and leave their
>> background to red.
>> 
>> I hope its more clear now, and still wonder if:
>> 
>> - 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
>> __
>> 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/

__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

Would this be what you're seeking?
I think this is the closest you can come if not.

h1:target
{
background: green;
}
h1:not(:target)
{
background: red;
}

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 12, 2016, at 8:03 AM, Andre Osku Schmidt 
>  wrote:
> 
> Sorry,
> 
> my first mail had an syntax error and was not clear enough, ill try again.
> 
> here is an example of :target
> http://osku.de/post/css-target-source-example1.html
> 
> there we have a single css definition:
> :target { background: green; }
> 
> so when we click a link (with eg. href="#foo") in the unordered list, you
> can see the "active" target (with eg. id="foo") change and leave their
> background to green. and all this with one css rule, pretty cool!
> 
> now, i'm trying to findout if there is a css pseudo-class that would be the
> source of :target.
> 
> lets pretend the pseudo-class im looking for is called :source and i would
> have css like this:
> :source { background: red; }
> 
> here is an example what it would do ("polyfilled" with javascript but
> apparently we cant just create our own pseudo-classes, so this example uses
> .source instead of :source):
> http://osku.de/post/css-target-source-example2.html
> 
> so when you click a link (with eg. href="#foo") in the unordered list, you
> can see the "active" source (with eg. href="#foo") change and leave their
> background to red.
> 
> I hope its more clear now, and still wonder if:
> 
> - 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
> __
> 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/

Re: [css-d] CSS pseudo-class for source of :target

[Philippe Wittenbergh]

> On Aug 12, 2016, at 10:03 PM, Andre Osku Schmidt 
>  wrote:
> 
> here is an example what it would do ("polyfilled" with javascript but
> apparently we cant just create our own pseudo-classes, so this example uses
> .source instead of :source):
> http://osku.de/post/css-target-source-example2.html

Fails in Safari 9.1 though: 'SyntaxError: Unexpected identifier 'clsn''
Works as expected in Firefox. Thanks for clarifying.

> so when you click a link (with eg. href="#foo") in the unordered list, you
> can see the "active" source (with eg. href="#foo") change and leave their
> background to red.
> 
> I hope its more clear now, and still wonder if:
> 
> - Is there really no such pseudo-class?

No not really - it is a variant on the :visited state. but more temporary.

> - Would this be technically impossible?
> - Has this been proposed before?
I don’t think so.

> - Any tips for proposing one? ;P

The mailing list for the CSS WG is your best bet.
https://lists.w3.org/Archives/Public/www-style/


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Philippe Wittenbergh]

> On Aug 12, 2016, at 9:42 PM, Chris Rockwell  wrote:
> 
> 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; }

That would indeed by interesting, a bit limited perhaps. Basically styling the 
originating link – it is bit similar to the :visited pseudo-class, though. I 
don’t remember having seen proposals covering this - and I don’t see anything 
like that Selectors4 [*].

Karl replied

> On Aug 12, 2016, at 9:50 PM, Karl DeSaulniers  wrote:
> 
> Yes, looks like it..
> 
> https://developer.mozilla.org/en-US/docs/Web/CSS/:target

No that is not it at all. The :target pseudo class styles the target of the 
link, IOW, the destination. What the OP wants is styling the originating link.


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Andre "Osku" Schmidt]

Sorry,

my first mail had an syntax error and was not clear enough, ill try again.

here is an example of :target
http://osku.de/post/css-target-source-example1.html

there we have a single css definition:
:target { background: green; }

so when we click a link (with eg. href="#foo") in the unordered list, you
can see the "active" target (with eg. id="foo") change and leave their
background to green. and all this with one css rule, pretty cool!

now, i'm trying to findout if there is a css pseudo-class that would be the
source of :target.

lets pretend the pseudo-class im looking for is called :source and i would
have css like this:
:source { background: red; }

here is an example what it would do ("polyfilled" with javascript but
apparently we cant just create our own pseudo-classes, so this example uses
.source instead of :source):
http://osku.de/post/css-target-source-example2.html

so when you click a link (with eg. href="#foo") in the unordered list, you
can see the "active" source (with eg. href="#foo") change and leave their
background to red.

I hope its more clear now, and still wonder if:

- 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
__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

Yes, looks like it..

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 12, 2016, at 7:42 AM, Chris Rockwell  wrote:
> 
> 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  wrote:
> 
>> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers 
>> 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/

__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Tom Livingston]

Right, sorry. Was thinking about it wrong.


-- 

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/

Re: [css-d] CSS pseudo-class for source of :target

[Chris Rockwell]

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  wrote:

> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers 
> 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/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

> On Aug 12, 2016, at 7:40 AM, Karl DeSaulniers  wrote:
> 
>> On Aug 12, 2016, at 7:32 AM, Tom Livingston  wrote:
>> 
>> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers  
>> 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
>> 
>> 
> 
> 
> We are checking for a hash here, so yeah I would include.
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 

But for clarity, there is no gun being held to any heads. :)

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

> On Aug 12, 2016, at 7:32 AM, Tom Livingston  wrote:
> 
> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers  
> 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
> 
> 


We are checking for a hash here, so yeah I would include.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
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/

Re: [css-d] CSS pseudo-class for source of :target

[Tom Livingston]

On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers  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/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

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 
>  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/

Re: [css-d] CSS pseudo-class for source of :target

[Tom Livingston]

>>
>> - 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
>
>
> I accidentally replied off list with...
>
> a[class="table-of-contents"]{
>  color: red;
> }
>
> Google "Attribute Selectors"
>
>
>
> But more in line with the OP's actual question:
>
> a[href*="table-of-contents"]{
>  color: red;
> }
>
>
> HTH
>

As with many things, your browser support needs may vary. I believe
this will work back to IE8 or 9. caniuse.com listed other attribute
selectors but I didn't see this one specifically listed.


-- 

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/

Re: [css-d] CSS pseudo-class for source of :target

[Tom Livingston]

On Thu, Aug 11, 2016 at 11:46 AM, Andre "Osku" Schmidt
 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


I accidentally replied off list with...

a[class="table-of-contents"]{
 color: red;
}

Google "Attribute Selectors"



But more in line with the OP's actual question:

a[href*="table-of-contents"]{
 color: red;
}


HTH


-- 

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-d] CSS pseudo-class for source of :target

[Andre "Osku" Schmidt]

#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/